Foundation CSS Flexbox Utilities Last Updated : 18 Oct, 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 layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox classes are used to make horizontal and vertical alignments super easy. Horizontal Alignment: Horizontal alignment classes are used for the reset to the default alignment. its classes are applied to flex parents. The left alignment is the default alignment. we can use one of these classes to change this. Used Classes: align-right: This class is used to align the text in right.align-center: This class is used to align the text in the center.align-justify: This class is used to align the text on the edges.align-spaced: This class is used to align the text around space. Vertical Alignment: 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-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-bottom: Adding an align-bottom to the parent div will ensure that the margin on the bottom of all the elements will be zero. Source Ordering: Flexbox has source ordering classes that order the columns according to the number specified in the order class. Foundation CSS Flexbox Utilities Source Ordering Classes: small-order-n: This class is used to specify the column order on the small screen size according to the specified number.medium-order-n: This class is used to specify the column order on the medium screen size according to the specified number.large-order-n: This class is used to specify the column order on the large screen size according to the specified number. Example 1: This example illustrates the use of the .align-top class. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Flexbox Utilities Source Ordering</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Flexbox Utilities </h3> <div class="grid-x grid-padding-x align-top"> <div class="cell small-4" style="background-color:red;"> GFG</div> <div class="cell small-4" style="background-color:green;"> GeeksforGeeks.org</div> </div> </center> <script> $(document).ready(function () { $(document).foundation(); }) </script> </body> </html> Output: Example 2: This example illustrates the use of the .align-middle class. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Flexbox Utilities Source Ordering</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Flexbox Utilities </h3> <div class="grid-x grid-padding-x align-middle"> <div class="cell small-4" style="background-color:rgb(200,206,12);"> GFG on middle alignment</div> <div class="cell small-4" style="background-color:rgb(179,161,245) ;"> GeeksforGeeks.org</div> </div> </center> <script> $(document).ready(function () { $(document).foundation(); }) </script> </body> </html> Output: Reference: https://get.foundation/sites/docs/flexbox-utilities.html Comment More infoAdvertise with us Next Article Foundation CSS Flexbox Utilities P pokhrajverma6266 Follow Improve Article Tags : Web Technologies CSS Foundation Foundation-Utilities Similar Reads Foundation CSS Flexbox Utilities Sass Reference Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox class 3 min read Foundation CSS Flexbox Mode 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, M 8 min read Foundation CSS Flexbox Utilities Source Ordering Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass 3 min read Foundation CSS Flex Grid Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will know about Flex Grid in Fo 3 min read Bootstrap 5 Utilities Flexbox Options Bootstrap 5 layout utility classes are a set of pre-defined classes that can be used to create responsive and flexible layouts. These classes include options for setting the width and height of elements, controlling the placement of elements using margins and padding, and arranging elements using a 3 min read Foundation CSS Kitchen Sink Flex Grid Foundation CSS is an open-source & 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, 3 min read Foundation CSS Flex Grid Offsets Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we discuss flex grid offsets. flex g 2 min read Foundation CSS Button Group Flexbox Foundation CSS is an open-source & 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, 3 min read Foundation CSS JavaScript Utilities Foundation JavaScript Utilities is a collection of tools that can be used to enhance the functionality of your Foundation website. To use Foundation JavaScript Utilities, you first need to include the foundation.js file in your website. Once you have done this, you can use the various utilities by c 4 min read Foundation CSS Prototyping Utilities Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Prototyping Utilities facilitate the building o 3 min read Like