Foundation CSS Flexbox Utilities
Last Updated :
18 Oct, 2022
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=
<script src=
</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=
<script src=
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...