Foundation - Flex Grid Vertical Alignment

Quiz

Description

The flex grid is aligned to the top by default. You can change the behavior with other set of alignment classes. In vertical alignment there are option present such as top, middle, bottom and stretch.

Example

The following example demonstrates the use of Vertical 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 align-bottom">
    <div class="columns" style="background-color:#8BD6EE;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="columns" style="background-color:#7B68EE;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</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 vertical_alignment.html file.
Open this HTML file in a browser, an output is displayed as shown below.

Print Page