Foundation 6 - Flexbox Grid
Examples using the new flex-box based grid system
These examples showcase how you can use Foundation 6 to create easily customisazble layouts using the optional Flexbox Grid
Note:This example uses the stylesheet taken directly off the Foundation 6 example page as of the current date of this example there isn't a direct CSS link to the optional Flex Grid layout
Flex Horizontal Alignment
Shows how you can use the alignment classes to easily position your content both horizontally and vertically
Align rightRight align the elements
Center align the elements
Space out the elements, with even spacing around the elements
Click to view the docs about horizontal alignment
Flex Verticalntal Alignment
Shows how you can use the vertical alignment classes to position your content vertically. By default flex items sit at the top of their parent, but you can manually set this on an element by element basis
Align TopDefault, aligns the items to the top of the parent
Here is some additional content making me taller
I also have some additional content, I'm stuck to the top!
Aligns the items to the middle of the parent
Here is some additional content making me taller
I also have some additional content
Aligns the items to the bottom of the parent
We are stuck to the bottom of the container
I also have some additional content, I'm stuck to the top!
Adding the alignment classes to the parent row will make all of the items inside of it align to the chosen vertical position. You can also specify on individual elements themselves where you want them to align by specifying either align-top, align-middle or align-bottom
Find out more about vertical alignment on the docs
Flex ordering
Shows how you can use flexbox grid to re-order elements depending on your screen profile
- Medium + Large profile: 1) Logo Title - 2) Social Media Bar - 3) Navigation Bar
- Small profile: 1) Social Media Bar - 2) Logo Title - 3) Navigation Bar
Resize your device to see this in action
Company Logo
Find out more about the flex-box ordering options on the docs