- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Flex Grid Column Alignment
Description
The flex grid columns can be aligned along the horizontal or vertical axis in the parent row.
Horizontal Alignment
The columns can be aligned in the same manner as that of the content aligned in paragraph.
Using .align-[dir] class in the flex row, you can align the columns according to your wish. By default, the column is aligned to the left.
The align-spaced class is used to keep the 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> <!-- Compressed CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></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.
Vertical Alignment
The flex grid is aligned to the top by default. You can change the behavior with the other set of alignment classes. In vertical alignment, options are available 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> <!-- Compressed CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></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.