Menu

Bootstrap 5 Flex


Previous


Next

Flexbox

The biggest difference between Bootstrap 3 and Bootstrap 4 & 5 is that Bootstrap 5 now uses flexbox, instead of floats, to handle the layout.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. If you are new to flex, you can read about it in our CSS Flexbox Tutorial.

To create a flexbox container and to transform direct children into flex items, use the d-flex class:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Flex</h2>
<p>To create a flexbox container and transform direct children into flex items, use the d-flex class:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

To create an inline flexbox container, use the d-inline-flex class:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Inline Flex</h2>
<p>To create an inline flexbox container, use the d-inline-flex class:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Horizontal Direction

Use .flex-row to display the flex items horizontally (side by side). This is default.

Tip: Use .flex-row-reverse to right-align the horizontal direction:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Horizontal Direction</h2>
<p>Use .flex-row to make the flex items appear side by side (default):</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<p>Use .flex-row-reverse to right-align the direction:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other), or .flex-column-reverse to reverse the vertical direction:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Vertical Direction</h2>
<p>Use .flex-column to display the flex items vertically (on top of each other):</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<p>Use .flex-column-reverse to reverse the vertical direction:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Justify Content

Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Justify content</h2>
<p>Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Fill / Equal Widths

Use .flex-fill on flex items to force them into equal widths:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Fill / Equal Widths</h2>
<p>Use .flex-fill on flex items to force them into equal widths:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<p>Example without .flex-fill:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Grow

Use .flex-grow-1 on a flex item to take up the rest of the space. In the example below, the first two flex items take up their necessary space, while the last item takes up the rest of the available space:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Grow</h2>
<p>Use .flex-grow-1 on a flex item to take up the rest of the space:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<p>Example without .flex-grow-1:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Order

Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 5, where the lowest number has highest priority (order-1 is shown before order-2, etc..):

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Order</h2>
<p>Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 5:</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Auto Margins

Easily add auto margins to flex items with .ms-auto (push items to the right), or by using .me-auto (push items to the left):

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Auto Margins</h2>
<p>Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push items to the left):</p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>

</body>
</html>

Wrap

Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.

Click on the buttons below to see the difference between the three classes, by changing the wrapping of the flex items in the example box:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Wrap</h2>
<p>Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.</p>
<p><code>.flex-wrap:</code></p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
</div>
<br>
<p><code>.flex-wrap-reverse:</code></p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
</div>
<br>
<p><code>.flex-nowrap:</code></p>
<div>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
<div>Flex item 26</div>
<div>Flex item 27</div>
<div>Flex item 28</div>
<div>Flex item 29</div>
<div>Flex item 30</div>
<div>Flex item 31</div>
<div>Flex item 32</div>
<div>Flex item 33</div>
<div>Flex item 34</div>
<div>Flex item 35</div>
</div>
<br>
</div>

</body>
</html>

Align Content

Control the vertical alignment of gathered flex items with the .align-content-* classes. Valid classes are .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.

Note: These classes have no effect on single rows of flex items.

Click on the buttons below to see the difference between the five classes, by changing the vertical alignment of the flex items in the example box:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Align Content</h2>
<p>Control the vertical alignment of gathered flex items with the .align-content-* classes.</p>
<p><strong>Note:</strong> This example does not look good on a small devices. Also note that these classes have no effect on single rows of flex items.</p>
<p>.align-content-start (default):</p>
<div style=”height:300px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
</div>
<br>
<p>.align-content-end:</p>
<div style=”height:300px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
</div>
<br>
<p>.align-content-center:</p>
<div style=”height:300px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
</div>
<br>
<p>.align-content-around:</p>
<div style=”height:300px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
</div>
<br>
<p>.align-content-stretch:</p>
<div style=”height:300px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
<div>Flex item 8</div>
<div>Flex item 9</div>
<div>Flex item 10</div>
<div>Flex item 11</div>
<div>Flex item 12</div>
<div>Flex item 13 </div>
<div>Flex item 14</div>
<div>Flex item 15</div>
<div>Flex item 16</div>
<div>Flex item 17</div>
<div>Flex item 18</div>
<div>Flex item 19</div>
<div>Flex item 20</div>
<div>Flex item 21</div>
<div>Flex item 22</div>
<div>Flex item 23</div>
<div>Flex item 24</div>
<div>Flex item 25</div>
</div>
<br>
</div>

</body>
</html>

Align Items

Control the vertical alignment of single rows of flex items with the .align-items-* classes. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).

Click on the buttons below to see the difference between the five classes:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Align Items</h2>
<p>Control the vertical alignment of single rows of flex items with the .align-items-* classes.</p>
<p>.align-items-start:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-items-end:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-items-center:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-items-baseline:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-items-stretch (default):</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
</div>

</body>
</html>

Align Self

Control the vertical alignment of a specified flex item with the .align-self-* classes. Valid classes are .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).

Click on the buttons below to see the difference between the five classes:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Align Self</h2>
<p>Control the vertical alignment of a specific flex item with the .align-self-* classes.</p>
<p>.align-self-start:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-self-end:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-self-center:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-self-baseline:</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
<p>.align-self-stretch (default):</p>
<div style=”height:150px”>
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<br>
</div>

</body>
</html>

Responsive Flex Classes

All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.

The * symbol can be replaced with sm, md, lg, xl or xxl, which represents small, medium, large, xlarge and xxlarge screens.

 

 

Class Description Example
Flex Container    
.d-*-flex Creates a flexbox container for different screens Try it
.d-*-inline-flex Creates an inline flexbox container for different screens Try it
Direction    
.flex-*-row Display flex items horizontally on different screens Try it
.flex-*-row-reverse Display flex items horizontally, and right-aligned, on different screens Try it
.flex-*-column Display flex items vertically on different screens Try it
.flex-*-column-reverse Display flex items vertically, with reversed order, on different screens screens Try it
Justified Content    
.justify-content-*-start Display flex items from the start (left-aligned) on different screens Try it
.justify-content-*-end Display flex items at the end (right-aligned) on different screens Try it
.justify-content-*-center Display flex items in the center of a flex container on different screens Try it
.justify-content-*-between Display flex items in “between” on different screens Try it
.justify-content-*-around Display flex items “around” on different screens Try it
Fill / Equal Width    
.flex-*-fill Force flex items into equal widths on different screens Try it
Grow    
.flex-*-grow-0 Don’t make the items grow on different screens  
.flex-*-grow-1 Make items grow on different screens  
Shrink    
.flex-*-shrink-0 Don’t make the items shrink on diferent screens  
.flex-*-shrink-1 Make items shrink on different screens  
Order    
.order-*-0-12 Change the order from 0 to 5 on small screens Try it
Wrap    
.flex-*-nowrap Don’t wrap items on different screens Try it
.flex-*-wrap Wrap items on different screens Try it
.flex-*-wrap-reverse Reverse the wrapping of items on different screens Try it
Align Content    
.align-content-*-start Align gathered items from the start on different screens Try it
.align-content-*-end Align gathered items at the end on different screens Try it
.align-content-*-center Align gathered items in the center on different screens Try it
.align-content-*-around Align gathered items “around” on different screens Try it
.align-content-*-stretch Stretch gathered items on different screens Try it
Align Items    
.align-items-*-start Align single rows of items from the start on different screens Try it
.align-items-*-end Align single rows of items at the end on different screens Try it
.align-items-*-center Align single rows of items in the center on different screens Try it
.align-items-*-baseline Align single rows of items on the baseline on different screens Try it
.align-items-*-stretch Stretch single rows of items on different screens Try it
Align Self    
.align-self-*-start Align a flex item from the start on different screens Try it
.align-self-*-end Align a flex item at the end on different screens Try it
.align-self-*-center Align a flex item in the center on different screens Try it
.align-self-*-baseline Align a flex item on the baseline on different screens Try it
.align-self-*-stretch Stretch a flex item on different screens Try it

  

Previous


Next

Scroll to Top