Foundation Flex Grid (continued)

In notebook:
Article Notes
Created at:
css libraries
Screencast: Foundation 6 — Responsive Web Designcontinued from Foundation 6 screencast
  • use less default styles (not to feel like overwriting stuff all the time)
  • still make it prettier
styles are just for the wireframes - look generic but not ugly
Flex Grid​
​​the float grid ​still IE9 compatible but flex box grid is IE10+
but saves you from the cross-browser inconsistencies

you have to use one or the other (float or flex grid)

it's progressive enchancement in design/framework

syntax is same as float

drawbacks of float based: you have to know wide all the elements are in your page (in px or % to add to 100%), you need clearfixes etc.

flex box have intelligent resizes options

Advanced options:

fill in any horizontal space left by ​
you can use more of these

shrink behaviour: only as large as it's contents (compared to above ​columns​ which will take all the space)

​unstack​ create a horizontal row for example: ​medium-unstack​ will unstack them on a target screen size


vertical and horizontal (align-right​) justify, even padding

same height columns - like the equalizer js plugin : creates equal height columns

Source ordering

no need to use ​position​: relative​  

no more push pull classes (foundation 5) but ​order​ classes
you can also vertically order

new spec of flexbox is much faster

there's also the CSS-gird spec, but it's far away.
the flex box is not really for layout.

they say time is right now for flexbox (it has even been for two years)