Foundation CSS Flex Grid Column Alignment

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. It has numerous pre-built website component that makes our website look professional and improves the user experience of the website. 

Why should we use Foundation CSS?

Foundation provides us with tons of features for free of charge and over that it’s highly optimized. We should always use Foundation because it helps us to simply illustrate and build websites. Foundation CSS provides us with a bunch of templates, which helps us to start out developing the website directly. It also gives us access to a strong grid system and a few useful UI components and funky JavaScript plugins, one among those UI components is Flex Grid.

Foundation CSS Flex Grid:

Flex Grid is nothing but a grid system that’s formed on the flex property that permits the responsive structure by creating the rows and columns. The row class is used to form a row and the column class is employed to form columns. It also comes with features that are available in flexboxes like automatic stacking, source ordering, vertical alignment, and horizontal alignment.

Column alignment is used to align the flex grid columns along the horizontal or vertical axis in the parent row. By default, all the flex grid columns are aligned to the left and it can be overridden with the .align-[dir] class to the flex parent class.

Horizontal alignment: No class needs to be added to the flex row to align the columns to the left because the column is by default aligned to the left. 

Flex Grid Column Alignment classes:

• align-right: This class is added to the flex row to align the columns to the right. we don’t need to use the align-left class because the column is by default aligned to the left. 
• align-center: This class is added to the flex row to align the columns in the middle with no space in between them and space at the other ends of them.
• align-spaced: This class is added to the flex row when we want an equal amount of space between all the columns.
• align-justify: This class is added to the flex row to align the left and right edges with space between the columns.
• align-bottom: By adding this class to the flex-container div, the columns are aligned to the bottom.
• align-middle: By adding this class to the flex-container div, the columns are aligned to the middle leaving an equal amount of space on the two ends.
• align-self-bottom, align-self-top, align-self-middle: By adding these classes to the column divs, the columns are aligned to the bottom.

Syntax:

<div class="row align-right">
  <div class="column small-4">
          ...
  </div>
  <div class="column small-4">
          ...
  </div>
  ...
</div>

Example 1: The following code demonstrates the default alignment,

Output:

 

Example 2: The following code demonstrates the Flexgrid column align-right class.

Output:

 

Example 3: The following code demonstrates the Flexgrid align-center class.

Output:

 

Example 4: The following code demonstrates the flexgrid align-spaced class.

Output:

 

Example 5: The following code demonstrates the flexgrid align-justify class.

Output:

 

Vertical Alignment:

• No Class: If we don’t add any vertical alignment class to a flex container the columns are aligned at the top. 

Example 6: The following code demonstrates the vertical top alignment.

Output:

 

Example 7: The following code demonstrates the flexgrid align-bottom class.

Output:

 

Example 8: The following code demonstrates the flexgrid align-middle class.

Output:

 

Example 9: The following code demonstrates the align-self-bottom,align-self-top,align-self-middle classes.

Output:

 

Reference link: https://get.foundation/sites/docs/flex-grid.html#column-alignment