Foundation CSS Flexbox Mode

Last Updated : 23 Jul, 2025

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

CSS is mainly used to design websites making them more presentable and appealing. We have to use different layout modes like Block, Inline, Table, Positioned. The better way to design layouts is using layout modules like Flexbox which is a combination of the display property flex and properties such as margin padding etc.

Foundation CSS gives access to a lot of pre-built components, we can easily use them by adding helper classes to different elements. One of those UI components is FlexBox Mode. Flexbox mode replaces Foundation's traditional method of using floats, vertical alignment, table cells, etc., with flexbox features and it helps us to create a website in an easier way. Whereas in the traditional way of implementing flexbox using CSS, we have to add a lot of properties like padding, margin, etc., to design the playout. In Foundation's Flexbox, we only need to add the helper classes like align-left, align-bottom, etc.

Flexbox Mode classes:

align-center: When we add align-center to a flexbox div that has a few child elements, the child elements are positioned to the center without any space between them.
align-spaced: When we add align-spaced to a flexbox div that has a few child elements, the child elements are positioned to the center with equal space on their left and right.
align-justify: When we add align-justify to a flexbox div that has a few child elements, the child elements are positioned to the center with equal space on their left and right and zero space on the right of the rightmost element and on the left of the leftmost element.
align-middle: Adding an align-middle to the parent div will ensure that the margin on the top and bottom of all the elements will be equal.
align-top: Adding an align-top to the parent div will ensure that the margin on the top of all the elements will be zero.
align-bottom: Adding an align-bottom to the parent div will ensure that the margin on the bottom of all the elements will be zero.
flex-child-auto: This is a helper class that can be added to any of the child elements of a div which is made into a flexbox. The flex-child-auto when added to a child element of a flexbox div, it takes up all the space in the flexbox which is not already occupied by the child elements.

Syntax:

<div class="flex-container align-center">
 ...
</div>

Example 1: The following code demonstrates the flexbox align-center class.

Output:

👁 Image

Example 2: The following code demonstrates the flexbox align-spaced class.

Output:

👁 Image

Example 3: The following code demonstrates the flexbox align-justify class.

Output:

👁 Image

Example 4: The following code demonstrates the flexbox align-bottom class.

Output:

👁 Image

Example 5: The following code demonstrates the flexbox align-middle class.

Output:

👁 Image

Example 6: Two helper classes can be combined to make unique and customized layouts. The align-middle and align-justify will ensure all the child elements have the same margin on the bottom and top. It will align all the child elements in the center with space on their left and right except the rightmost and leftmost div.

Output:

👁 Image

Example 7: The following code demonstrates the flexbox flex-child-auto class.

Output:

👁 Image

When two child elements of the same parent flexbox div have the flex-child-auto class, the remaining space is equally occupied by those two child elements.

Browser Support: Foundation CSS Flexbox mode is only supported by these browsers.