Vertical flex layout will be supported ?

[wensonsmith]

This is mobi.css framework, it support vertical flex layout , it's useful.

So any plan to support vertical flex layout ? thanks.

[kball]

I definitely think we're only scratching the surface of what is possible with flexbox, but I'd like to get a better sense of what types of things we really want to enable with it. Its not clear to me what the value is in a "vertical columns" implementation like this, but if we can explain some possibilities and encapsulate it I'd be happy for us to do something here.

Can you highlight some examples of where you'd use this? Or what types of patterns you might want to wrap up in this? @wensonsmith and @DaSchTour

@ncoden @andycochran @brettsmason @zurbrandon Do you have any thoughts or ideas on what we could do with something here?

[brettsmason]

So I'm not hugely familiar with flexbox as I dont use it day to day yet. However I cant see any harm in adding this so we fully embrace flexbox.

From looking over the specs and the code we already have, I would suggest a mixin of something like:

@mixin flex-direction($direction) {
    flex-direction: $direction;
}

It looks like the possible values are:

• row (default): same as text direction
• row-reverse: opposite to text direction
• column: same as row but top to bottom
• column-reverse: same as row-reverse top to bottom

Then we would need some utility classes generated from this for non-mixin folks.

[DaSchTour]

One example of a usecase for vertical fexbox is my PR for flexbox cards #8722 that is hanging around since half a year. I heavily use this for elements with a fixed height header and footer and a flexible middle part to get equal height for all elements in a row without javascript.

[wensonsmith]

All I want to do is make div element auto height.

For example :

This is my app structure, Header and Button is fixed height, Vertical flex can easy to make Scroll Part auto fit the left space. It's more complex to use % or other tricks.

Most Desktop web pages is left to right structure, But Mobile web pages is top to bottom structure, so vertical flex layout is useful to develop Mobile web pages.

Sorry for my English , hope you can understand, Thank you!

[kball]

Ok, sounds good. @DaSchTour I'll take a look at the flexbox card PR again shortly, but I think this is looking for something a little more 'foundational' than that.

Would any of @wensonsmith, @DaSchTour, or @brettsmason like to take a pass on an implementation and submit it as a PR?

[markadrake]

It can also be used to produce a layout such as this quickly and effectively. This image shows essentially 3 flex containers. The initial container is horizontal and creates the two columns. The next flex box is in the right container, and it's vertical, and cuts it again in half for two rows. Then you place another flex container (having fun yet?) for the top right columns.

And then you can apply stacking classes to manipulate the structure when moving from a larger desktop screen all the way down to mobile and 100% stacked.

[kball]

Ok, I'm definitely sold on the utility. Would happily accept a PR

[zurbrandon]

This is basically what the apps grid produces, i know there are talks of adding that in @kball and that may cover this usecase.

[kball]

Hey folks, I took a pass on this in #9324

Would love your feedback

[kball]

This has been implemented in #9324! Let me know if you run into any challenges or find things that feel missing.

[iamrobert]

Here's getting equal heights for headings:

https://codepen.io/iamrobert/pen/eyeyBB

I've looked at cards - but can't work out how to implement equal heights for headings without equalizer.