Foundation-sites: Vertical flex layout will be supported ?

Created on 27 Sep 2016 · 11Comments · Source: foundation/foundation-sites

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

So any plan to support vertical flex layout ? thanks.

Source

wensonsmith

👍3

Most helpful comment

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.

DaSchTour on 28 Sep 2016

👍2

All 11 comments

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?

kball on 28 Sep 2016

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.

brettsmason on 28 Sep 2016

DaSchTour on 28 Sep 2016

👍2

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!

wensonsmith on 28 Sep 2016

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?

kball on 28 Sep 2016

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.