«Return to Blog ListFlexBox for Website Themes
I’ve been meaning for a year or two to update my site development to use FlexBox for layout rather than Foundation’s old(?) float-based column layouts. Recently I came across a FlexBox example that was close to what I needed, so I tinkered with it until it would meet my needs for page layouts. I got nested containers to work the way I want and made some other changes, so now I’m developing a FlexBox-based theme I’ll call EvoFlexbox. Hopefully I’ll have it ready to go when my next design / development project starts in another few days.
One of the things that excited me about FlexBox is that columns inside a flex container automatically appear the same height by default, most apparent when using nested containers. With float-based columns, it was necessary to use some occasionally unreliable javascript to make equal height columns. I’m not against using javascript, but I like that it’s no longer necessary in this case.
I’m making the demo available for download (an HTML page with CSS included in the head), if anyone would like to use it as a basis for toying with FlexBox. You can view it in your browser here. [UPDATE, DEC. 2024: Also, this website uses the same base, although the nested boxes in use on the site are for two-column arrangement of portfolio examples, which are not shown on the demo.]
Also, for reference, CSS Tricks has a comprehensive FlexBox guide.
