Open In App

Foundation CSS Flexbox Mode

Last Updated : 04 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Foundation CSS CDN -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- Foundation-prototype.min.css: Compressed 
        CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous">

    <!-- Foundation-float.min.css: Compressed 
        CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous">
    <title>Foundation CSS Flexbox Mode</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-center">
        Align Center Helper Class
    </h3>
    
    <!--Parent Flexbox Container-->
    <div class="flex-container align-center margin-3" 
        style="background-color:#ccffcc; height:4rem">
        <div class="small-2 padding-1" 
            style="background-color: #00ff00">1</div>
        <div class="small-2 padding-1" 
            style="background-color: #2eb82e">2</div>
        <div class="small-2 padding-1" 
            style="background-color: #009933">3</div>
    </div>
    <pre class="margin-left-3">
        It aligns all the child div in the center.
    </pre>
</body>

</html>

Output:

 

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- oundation-prototype.min.css: Compressed 
        CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous">

    <!-- foundation-float.min.css: Compressed 
        CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous">
    <title>Foundation CSS Flexbox Mode</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-center">
        Align Spaced Helper Class
    </h3>
    
    <!--Parent Flexbox Container-->
    <div class="flex-container align-spaced margin-3"
        style="background-color: #ccffcc; height:4rem">
        <div class="small-2 padding-1" 
            style="background-color:#00ff00">1</div>
        <div class="small-2 padding-1" 
            style="background-color:#2eb82e">2</div>
        <div class="small-2 padding-1" 
            style="background-color:#009933">3</div>
    </div>
    <pre class="margin-left-2">
        It aligns all the child div in the center 
        with space on their left and right.
     </pre>
</body>

</html>

Output:
 

 

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- foundation-prototype.min.css: Compressed 
        CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous">

    <!-- foundation-float.min.css: Compressed 
        CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous">
    <title>Foundation CSS Flexbox Mode</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-center">
        Align Justify Helper Class
    </h3>
    
    <!--Parent Flexbox Container-->
    <div class="flex-container align-justify margin-3" 
        style="background-color:#ccffcc; height:4rem">
        <div class="small-2 padding-1" 
            style="background-color:#00ff00">1</div>
        <div class="small-2 padding-1" 
            style="background-color:#2eb82e">2</div>
        <div class="small-2 padding-1" 
            style="background-color:#009933">3</div>
    </div>
    <pre class="margin-left-3">
        It aligns all the child div in the center 
        with space on their left and right except 
        the rightmost and leftmost div.
    </pre>
</body>

</html>

Output:

 

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- foundation-prototype.min.css: Compressed 
        CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous">

    <!-- foundation-float.min.css: Compressed 
        CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous">
    <title>Foundation CSS Flexbox Mode</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-center">
        Align Bottom Helper Class
    </h3>
    
    <!--Parent Flexbox Container-->
    <div class="flex-container align-bottom margin-3" 
        style="background-color: #ccffcc; height:4rem">
        <div class="small-2 padding-1" 
            style="background-color:#00ff00">1</div>
        <div class="small-2 padding-1" 
            style="background-color:#2eb82e">2</div>
        <div class="small-2 padding-1" 
            style="background-color:#009933">3</div>
    </div>
    <pre class="margin-left-3">
        It ensures all the child elements 
        have zero margin on the bottom.
    </pre>
</body>

</html>

Output:

 

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- foundation-prototype.min.css: Compressed 
        CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous">

    <!-- foundation-float.min.css: Compressed 
        CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous">
    <title>Foundation CSS Flexbox Mode</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-center">
        Align Middle Helper Class
    </h3>
    
    <!--Parent Flexbox Container-->
    <div class="flex-container align-middle margin-3" 
        style="background-color: #ccffcc; height:5rem">
        <div class="small-2 padding-1" 
            style="background-color: #00ff00">1</div>
        <div class="small-2 padding-1" 
            style="background-color: #2eb82e">2</div>
        <div class="small-2 padding-1" 
            style="background-color: #009933">3</div>
    </div>
    <pre class="margin-left-3">
        It ensures all the child elements have 
        same margin on the bottom and top.
    </pre>
</body>

</html>

Output:

 

.

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.

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- foundation-prototype.min.css: Compressed 
        CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous">

    <!-- foundation-float.min.css: Compressed 
        CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous">
    <title>Foundation CSS Flexbox Mode</title>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-center">
        Align Middle and Justify Class Combined
    </h3>
    
    <!--Parent Flexbox Container-->
    <div class="flex-container align-middle align-justify margin-3"
        style="background-color: #ccffcc; height:5rem">
        <div class="small-2 padding-1" 
            style="background-color:#00ff00">1</div>
        <div class="small-2 padding-1" 
            style="background-color:#2eb82e">2</div>
        <div class="small-2 padding-1" 
            style="background-color:#009933">3</div>
    </div>
    <pre class="margin-left-3">
        It ensures all the child elements have same 
        margin on the bottom and top. And aligns all 
        the child div in the center with space on 
        their left and right except the rightmost 
        and leftmost div.
   </pre>
</body>

</html>

Output:

 

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- foundation-prototype.min.css: Compressed 
        CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
        crossorigin="anonymous">

    <!-- foundation-float.min.css: Compressed 
        CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
        crossorigin="anonymous">
    <title>Foundation CSS Flexbox Mode</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-center">
        Flex child auto class
    </h3>
    
    <!--Parent Flexbox Container-->
    <div class="flex-container margin-3" 
        style="background-color:#ccffcc; height:5rem">
        <div class="small-2 padding-1" 
            style="background-color: #00ff00">1</div>
        <div class="flex-child-auto small-2 padding-1" 
            style="background-color:#2eb82e">2</div>
        <div class="small-2 padding-1" 
            style="background-color:#009933">3</div>
    </div>

    <pre class="margin-left-3">
        To whichever child element it is added 
        takes up all the space that's left after 
        all elements have taken up their space.
    </pre>
</body>

</html>

Output:

 

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.

  • The latest version of Chrome and Firefox
  • Safari 6 and above
  • Internet Explorer/Edge 10+ and above
  • iOS 7 and above
  • Android 4.4 and above

Reference link: https://get.foundation/sites/docs/flexbox-mode.html


Next Article
Foundation CSS JavaScript Installation & Initialization

P
priyanshuchatterjee01
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox