Foundation - Flex Grid Horizontal Alignment

Quiz

Description

The columns can be aligned in the same manner of the content is aligned in paragraph. Using .align-[dir] class in the flex row, you can align the columns however you wish. By default, the column is aligned to left.

The align-spaced class is used to keep space between each column.

align-justify class aligns the columns to the left and right edge with a space between the column.

Example

The following example demonstrates the use of Horizontal alignment in Foundation −

<!DOCTYPE html>
<html>
   <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Foundation Template</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/foundation.min.js"></script>
   </head>

   <body>
  <h2>Example of Flex Grid</h2>
  <div class="row">
     <div class="column small-3" style="background-color:#FF6347;">Left</div>
     <div class="column small-3" style="background-color:#C0B0F0;">Side</div>
  </div>

  <h2>Aligned to right</h2>
  <div class="row align-right">
     <div class="column small-4" style="background-color:#FF6347;">Right</div>
     <div class="column small-4" style="background-color:#C0B0F0;">Side</div>
  </div>

  <h2>Aligned in Middle</h2>
  <div class="row align-center">
     <div class="column small-5" style="background-color:#FF6347;">Aligned in</div>
     <div class="column small-5" style="background-color:#C0B0F0;">Middle</div>
  </div>

  <h2>Aligned to the Edges</h2>
  <div class="row align-justify">
     <div class="column small-3" style="background-color:#FF6347;">Left Edge</div>
     <div class="column small-3" style="background-color:#C0B0F0;">Right Edge</div>
  </div>

  <h2>Aligned to Space around</h2>
  <div class="row align-spaced">
     <div class="column small-4" style="background-color:#FF6347;">Spaces</div>
     <div class="column small-4" style="background-color:#C0B0F0;">Spaces</div>
  </div>
</body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code horizontal_alignment.html file.
Open this HTML file in a browser, an output is displayed as shown below.

Print Page