Menu icon Foundation
Suggestion for flex grid

Hi, I built a wonderful site based on your flex grid. In order to comfortably make it fluid and responsive the vertical and horizontal alignment classes of flex items should additionally be prefixed small-, medium- and large- like so:

.small-align-top.columns, .column.small-align-top { 
 -webkit-align-self:flex-start;
 -ms-flex-item-align:start;
 align-self:flex-start; 
 }
@media screen and (min-width:40em){
.medium-align-top.columns, .column.medium-align-top { 
 -webkit-align-self:flex-start;
 -ms-flex-item-align:start;
 align-self:flex-start; 
 }
}

etc.

Flexibility not only for modern grids but also for us ;-)

Anke

cssflexgridflex-grid

Hi, I built a wonderful site based on your flex grid. In order to comfortably make it fluid and responsive the vertical and horizontal alignment classes of flex items should additionally be prefixed small-, medium- and large- like so:

.small-align-top.columns, .column.small-align-top { 
 -webkit-align-self:flex-start;
 -ms-flex-item-align:start;
 align-self:flex-start; 
 }
@media screen and (min-width:40em){
.medium-align-top.columns, .column.medium-align-top { 
 -webkit-align-self:flex-start;
 -ms-flex-item-align:start;
 align-self:flex-start; 
 }
}

etc.

Flexibility not only for modern grids but also for us ;-)

Anke

Rafi Benkual about 1 year ago

Hi Anke,

Congrats on completing your project! We're loving the Flex property here as well. Was this a site for you, a client, or your company? Were they ok with the browser compatibility?

 

For the next big release 6.3, we added a bunch of flex utility classes:

https://github.com/zurb/foundation-sites/commit/6125b3041a17409e4ff32e10e9d6b908facd240f

We'd love to see your suggestion on GitHub so we can see about how those can be added in too!

Anke O. about 1 year ago

Hi Rafi,

Thanks for your feedback. It's my own site and it's not quite finished, i.e. I also have to check some more browsers and resolutions (looking perfect in FF, Edge/IE and Opera Mobile). Acutually I never worked with flex box grids before, so it took me a few days to figure out the best practice, especially in combination with adapted Contao templates, absolute positionings and no-scrolling-areas.

I'll check out your commit(s) and post my suggestions there if still necessary...