Bootstrap’s flexible box layout study notes
Table of contents
- 01-Overview
- 02-Use the class d-flex and the class d-inline-flex to define the container as a flexible box
- 03- Set the order of the elements of the flexible container in the horizontal direction
- 03- Arrange the elements of the flexible container in the vertical direction.
- 04-Alignment of all elements in the flexible box in the main axis direction
- 05-1-The alignment of each row in the flexible box in the cross-axis direction
- 05-2-The alignment of multi-line content in the flexible box in the cross-axis direction
- 06-Separately set the alignment of an element in the flexible container on the cross axis
- 07-Distribute the remaining space layout of the container equally (fill the container layout)
- 08-Set an element to occupy as much remaining space as possible
- 09- Floating layout in horizontal direction (left aligned, right aligned)
- 10- Floating layout in vertical direction (top aligned and bottom aligned)
- 11-Automatic line wrapping
- 12-Set the order of elements in the flexible box
01-Overview
Bootstrap's Flexbox is a layout model for creating flexible, responsive layouts. Its implementation in Bootstrap makes building complex web page layouts much easier and more controllable. The following are the main features of Bootstrap flex box:
-
Flexible layout: The flexible box model allows sub-elements within the container to be freely expanded and arranged to adapt to different screen sizes and devices.
-
Horizontal and vertical centering: Bootstrap’s Flexbox supports easy center alignment of elements horizontally and vertically without using complex CSS.
-
Order control: You can easily change the order in which child elements are arranged in a container by adjusting their order without changing the HTML structure.
-
Adaptive column width: Flexbox allows the columns within the container to adapt their width to fill the available space without specifying a fixed column width.
-
Wrap: When child elements do not fit on one line in the container, they wrap to the next line without overflowing or overlapping.
-
Space allocation: You can allocate the available space by adjusting the weights between the flexbox child elements to achieve different width ratios between different elements.
-
Alignment and spacing control: Flexbox allows you to precisely control the alignment and spacing of child elements within the container.
-
Nesting support: You can nest multiple flexbox containers to create more complex layouts.
In summary, Bootstrap’s flexbox model provides a powerful tool that simplifies the development of web layouts and makes them more flexible and responsive. It is one of the essential tools for building modern web interfaces, especially for projects that need to adapt to different screen sizes and devices. In Bootstrap 4 and Bootstrap 5, Flexbox has become the default layout model, so you can easily leverage its capabilities to create a wide variety of layouts.
02-Use the class d-flex and the class d-inline-flex to define the container as a flexible box
In Bootstrap's flexible box feature, the d-flex and d-inline-flex decorative containers are mainly used to define flexible boxes.
Q: What is the difference between Bootstrap's d-flex class and d-inline-flex class?
answer:
-
d-flexClass: This class is used to set the element to "flex" display mode, making the element a flexible container, and the internal sub-elements can be arranged using Flexbox layout. This means that the element will take up the entire available width, usually one row inside the container, filling the remaining horizontal space. Child elements are stacked on a row by default, arranged according to the rules of the flex container. -
d-inline-flexClass: This class also sets the element to "flex" display mode, but unliked-flex, it will make the element an inline flex container, that is, the element will not occupy the entire available width, but will be displayed inline. This means that multipled-inline-flexelements can be displayed side by side in the same row, with the child elements arranged according to the rules of the inline flex container.
Summary of differences:
d-flexCauses the element to occupy the entire available width, usually one row within the container, filling the remaining horizontal space.d-inline-flexMakes the elements an inline flex container. The elements are displayed side by side on the same line, without taking up the entire available width, and are arranged according to the rules of the inline flex container.
You can choose one of these two classes as needed to control how the element is displayed and make the element a block-level or inline element depending on your layout requirements.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建弹性盒子</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">定义弹性盒子</h3>
<h4>使用d-flex类创建弹性盒子</h4>
<!--使用d-flex类创建弹性盒子-->
<div class="d-flex p-3 bg-warning text-white">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">在线课程</div>
<div class="p-2 bg-danger">加入会员</div>
</div><br/>
<h4>使用d-inline-flex类创建弹性盒子</h4>
<!--使用d-inline-flex类创建弹性盒子-->
<div class="d-inline-flex p-3 bg-warning text-white">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">在线课程</div>
<div class="p-2 bg-danger">加入会员</div>
</div>
</body>
</html>
For the meaning of "p-3" in the code, please visit the blog post: https://blog.csdn.net/wenhao_ir/article/details/132666590 .
The running effect is shown in the figure below:
03- Set the order of the elements of the flexible container in the horizontal direction
You can use the flex-row class to set the elements of the flex container to be arranged from left to right. Of course, the default is also arranged from left to right.
You can use the flex-row-reverse class to arrange the elements of a flex container from right to left.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平方向排列</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">水平方向排列</h3>
<h4>使用flex-row（从左侧开始）</h4>
<div class="d-flex flex-row p-3 bg-warning text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div><br/>
<h4>使用flex-row-reverse（从右侧开始）</h4>
<div class="d-flex flex-row-reverse bg-warning p-3 text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
</body>
</html>
The running effect is as follows:
03- Arrange the elements of the flexible container in the vertical direction.
You can use the flex-column class to set the elements of the flex container to be arranged from top to bottom. Of course, the default is also to arrange them from top to bottom.
You can use the flex-row-reverse class to arrange the elements of a flex container from bottom to top.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直方向排列</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">垂直方向排列</h3>
<h4>1. flex-column（从上往下）</h4>
<div class="d-flex flex-column p-3 bg-warning text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div><br/>
<h4>2. flex-column-reverse（从下往上）</h4>
<div class="d-flex flex-column-reverse bg-warning p-3 text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
</body>
</html>
The running effect is as follows:
04-Alignment of all elements in the flexible box in the main axis direction
You can use the following five classes to achieve "alignment of all elements in the flexible box in the main axis direction":
justify-content-start
justify-content-center
justify-content-end
justify-content-between
justify-content-around
example code as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子内所有元素在主轴方向上的对齐方式</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">弹性盒子内所有元素在主轴方向上的对齐方式</h3>
<h4>justify-content-start：各元素位于弹性容器主轴方向的开头</h4>
<div class="d-flex justify-content-start mb-3 bg-warning text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h4>justify-content-center：各元素位于弹性容器主轴方向的中间</h4>
<div class="d-flex justify-content-center mb-3 bg-warning text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h4>justify-content-end：各元素位于弹性容器主轴方向的尾部</h4>
<div class="d-flex justify-content-end mb-3 bg-warning text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h4>justify-content-between：在弹性容器的主轴方向上各元素之间留有空白</h4>
<div class="d-flex justify-content-between mb-3 bg-warning text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h4>justify-content-around：在弹性容器的主轴方向上各元素的前后留有空白</h4>
<div class="d-flex justify-content-around bg-warning text-white">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
</body>
</html>
For a detailed introduction to the class mb-3 in this sample code, please see the blog post: https://blog.csdn.net/wenhao_ir/article/details/132666590
What is a spindle?
Please refer to the blog post: https://blog.csdn.net/wenhao_ir/article/details/133357422
The operation effect is shown in the figure below:
05-1-The alignment of each row in the flexible box in the cross-axis direction
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子内各行在交叉轴方向上的对齐方式</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<style>
.box{
width: 100%; /*设置宽度*/
height: 70px; /*设置高度*/
}
</style>
<body class="container">
<h3 align="center">弹性盒子内各行在交叉轴方向上的对齐方式 </h3>
<h4>align-items-start：各行在交叉轴方向上对齐到父容器的顶部</h4>
<div class="d-flex align-items-start bg-warning text-white mb-3 box">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4>align-items-end：各行在交叉轴方向上对齐到父容器的底部</h4>
<div class="d-flex align-items-end bg-warning text-white mb-3 box">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4>align-items-center：各行在交叉轴方向上居中对齐</h4>
<div class="d-flex align-items-center bg-warning text-white mb-3 box">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4>align-items-baseline：各行在交叉轴方向上基线对齐</h4>
<div class="d-flex align-items-baseline bg-warning text-white mb-3 box">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success" style="font-size: x-large;">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success" style="font-size: x-large;">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4>align-items-stretch：各行在在交叉轴方向上进行拉伸处理</h4>
<div class="d-flex align-items-stretch bg-warning text-white mb-3 box">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">办公电脑</div>
<div class="p-2 bg-danger">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
</body>
</html>
What is a cross axis?
Please see the blog post: https://blog.csdn.net/wenhao_ir/article/details/133357422
Regarding the concept of baseline and the baseline alignment of child elements within their parent container , please refer to the blog post:
https://blog.csdn.net/wenhao_ir/article/details/133343442
The operation effect is as follows:
05-2-The alignment of multi-line content in the flexible box in the cross-axis direction
The objects processed by each class in 05-1 are individual lines, while the objects processed by the classes in 05-2 are consecutive multiple lines.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子内多行内容在交叉轴方向上的对齐方式</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">弹性盒子内多行内容在交叉轴方向上的对齐方式</h3>
<h4 align="center">align-content-start</h4>
<div class="d-flex align-content-start bg-warning text-white flex-wrap mb-4" style="height: 150px;">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4 align="center">align-content-center</h4>
<div class="d-flex align-content-center bg-warning text-white flex-wrap mb-4" style="height: 150px;">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4 align="center">align-content-end</h4>
<div class="d-flex align-content-end bg-warning text-white flex-wrap" style="height: 150px;">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
</body
</html>
The running effect is shown in the figure below:
We replace the classes in this example with each class in 5-1, that is, the class that processes the unit per line. The code is as follows:
We replace the classes in this example with the classes in 5-1 Each class, that is, the class that processes the unit per row, the code is as follows:
We replace the classes in this example with each class in 5-1, that is, the class that processes the unit per row, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子内每一行内容在交叉轴方向上的对齐方式</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">弹性盒子内每一行内容在交叉轴方向上的对齐方式</h3>
<h4 align="center">align-items-start</h4>
<div class="d-flex align-items-start bg-warning text-white flex-wrap mb-4" style="height: 150px;">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4 align="center">align-items-center</h4>
<div class="d-flex align-items-center bg-warning text-white flex-wrap mb-4" style="height: 150px;">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4 align="center">align-items-end</h4>
<div class="d-flex align-items-end bg-warning text-white flex-wrap" style="height: 150px;">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-primary">玩具乐器</div>
<div class="p-2 bg-success">汽车用品</div>
<div class="p-2 bg-danger">特产食品</div>
<div class="p-2 bg-primary">图书文具</div>
<div class="p-2 bg-success">童装内衣</div>
<div class="p-2 bg-danger">鲜花礼品</div>
</div>
</body
</html>
The running effect is as follows:
06-Separately set the alignment of an element in the flexible container on the cross axis
In point 05, what is set is the alignment of all elements in the entire container on the intersection.
You can use the following class to set the alignment of an element in a flexible container on the cross.
align-self-start
align-self-center
align-self-end
align-self-baseline
align-self-stretch
If you want to make good use of the above automatic alignment classes, you must understand what a cross axis is. For the concept of cross-axis, please refer to my other blog post: https://blog.csdn.net/wenhao_ir/article/details/133357422
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单独设置弹性容器内某个元素在交叉轴上的对齐方式</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<style>
.box{
width: 100%; /*设置宽度*/
height: 70px; /*设置高度*/
}
</style>
<body class="container">
<h3 align="center">单独设置弹性容器内某个元素在交叉轴上的对齐方式</h3>
<h4>align-self-start：第2个子元素尽可能靠近交叉轴的起始位置</h4>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">家用电器</div>
<div class="px-2 bg-success align-self-start">办公电脑</div>
<div class="px-2 bg-danger">男装女装</div>
</div>
<h4>align-self-center：第2个子元素在交叉轴上居中对齐</h4>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">家用电器</div>
<div class="px-2 bg-success align-self-center">办公电脑</div>
<div class="px-2 bg-danger">男装女装</div>
</div>
<h4>align-self-end：第2个子元素尽可能靠近交叉轴的结束位置</h4>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">家用电器</div>
<div class="px-2 bg-success align-self-end">办公电脑</div>
<div class="px-2 bg-danger">男装女装</div>
</div>
<h4>align-self-baseline：第2个和第3个子元素按交叉轴的基线对齐</h4>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">家用电器</div>
<div class="px-2 bg-success align-self-baseline" style="font-size: x-large;">办公电脑</div>
<div class="px-2 bg-danger align-self-baseline">男装女装</div>
</div>
<h4>align-self-end：第2个子元素在交叉轴方向上进行拉伸处理</h4>
<div class="d-flex bg-warning text-white mb-3 box">
<div class="px-2 bg-primary">家用电器</div>
<div class="px-2 bg-success align-self-stretch">办公电脑</div>
<div class="px-2 bg-danger">男装女装</div>
</div>
</body>
</html>
The running effect is shown in the figure below:
07-Distribute the remaining space layout of the container equally (fill the container layout)
You can use the flex-fill class to evenly distribute the remaining space of the container (fill the container layout).
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>均分容器剩下的空间布局(填满容器布局)</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<h3 align="center">均分容器剩下的空间布局(填满容器布局)</h3>
<div class="d-flex bg-warning text-white">
<div class="flex-fill p-2 bg-primary ">首页</div>
<div class="flex-fill p-2 bg-success">经典的在线课程</div>
<div class="flex-fill p-2 bg-danger">会员中心</div>
</div>
</body>
</html>
The running effect is shown in the figure below:
08-Set an element to occupy as much remaining space as possible
You can use the flex-grow-1 and w-100 classes to set an element to occupy as much remaining space as possible.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>某个元素尽可能多的占用剩余空间</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h5 align="center">flex-grow-1：某个元素占用所有的剩余空间</h5>
<div class="d-flex bg-warning text-white mb-4">
<div class="p-2 flex-grow-1 bg-primary">家用电器</div>
<div class="p-2 bg-success">电脑办公</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h5 align="center">w-100：设置元素的宽度占用容器的整个可用宽度</h5>
<div class="d-flex bg-warning text-white">
<div class="p-2 w-100 bg-primary">家用电器</div>
<div class="p-2 bg-success">电脑办公</div>
<div class="p-2 w-100 bg-danger">男装女装</div>
</div>
</body>
</html>
The running effect is shown in the figure below:
09- Floating layout in horizontal direction (left aligned, right aligned)
You can use the class mr-auto and the class ml-auto to achieve left alignment and right alignment of elements in the container respectively.
The class mr-auto is introduced as follows:
In Bootstrap, mr-autoit is a class used to adjust horizontal alignment. Specifically, mr-autoa class is applied to an element (usually an element's CSS class) to set the element's margin-right to auto, causing the element to its right to be horizontal within its container Align right .
This is often used in Bootstrap's grid system to push elements to the right of an element to the right of its container to achieve a horizontal alignment effect.
Introduction to the ml-auto class: abbreviated.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平方向浮动布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 class="mb-3" align="center">水平方向浮动布局</h3>
<h5 align="center">未设置某个元素的左右边距为自动</h5>
<div class="d-flex bg-warning text-white mb-3">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">电脑办公</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h5 align="center">设置第1个元素的右边距为自动,<br/>这样其右边的元素会被推到右边，<br/>从而实现其右边的元素右对齐。</h5>
<div class="d-flex bg-warning text-white mb-3">
<div class="mr-auto p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">电脑办公</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h5 align="center">设置第3个元素的左边距为自动,<br/>这样其左边的元素会被推到左边，<br/>从而实现其左边的元素左对齐。</h5>
<div class="d-flex bg-warning text-white mb-3">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">电脑办公</div>
<div class="ml-auto p-2 bg-danger">男装女装</div>
</div>
</body>
</html>
The running effect is as follows:
10- Floating layout in vertical direction (top aligned and bottom aligned)
You can use the classes mb-auto and mt-auto to achieve bottom alignment and top alignment of other elements. mb is the abbreviation of margin-bottom, and mt is the contraction of margin-top.
After understanding mr-atuo in the 9th one, you can actually understand these two, so I won’t go into details here.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直方向浮动布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 class="mb-4" align="center">垂直方向浮动布局</h3>
<h5 align="center">设置第1个元素的下边距为自动,<br/>这样其下方的元素会被推到底部，<br/>从而实现其下方元素的底对齐。</h5>
<div class="d-flex align-items-end flex-column bg-warning text-white mb-4" style="height: 200px;">
<div class="mb-auto p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">电脑办公</div>
<div class="p-2 bg-success">母婴用品</div>
<div class="p-2 bg-danger">男装女装</div>
</div>
<h5 align="center">设置第4个元素的上边距为自动,<br/>这样其上方的元素会被推到顶部，<br/>从而实现其上方元素的顶对齐。</h5>
<div class="d-flex align-items-end flex-column bg-warning text-white" style="height: 200px;">
<div class="p-2 bg-primary">家用电器</div>
<div class="p-2 bg-success">电脑办公</div>
<div class="p-2 bg-success">母婴用品</div>
<div class="mt-auto p-2 bg-danger">男装女装</div>
</div>
</body>
</html>
The running effect is shown in the figure below:
11-Automatic line wrapping
You can use the flex-wrap and flex-wrap-reverse classes to implement automatic line wrapping.
The two classes are introduced as follows:
The Bootstrap class flex-wrapis a class used to control how items in the Flexbox layout wrap in the container. Flexbox is a flexible layout model that allows items in a container to automatically adjust their position in different orientations to fit the available space. flex-wrapClasses have three possible values:
-
flex-nowrap(Default): Items do not wrap, they are squeezed into one line as much as possible, even if they exceed the bounds of the container. -
flex-wrap: Items will wrap as needed. If the container is not wide enough to accommodate all items, some items will automatically wrap to the next line. -
flex-wrap-reverse:flex-wrapSimilar to , but items wrap from the bottom of the container upwards.
These classes are often used with Bootstrap's grid system to control how columns are laid out on different screen sizes. For example, you can use flex-nowrapthe class to ensure that columns do not wrap on smaller screens, and on larger screens you can use the flex-wrapclass to allow columns to wrap to fit the larger screen width.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动换行的弹性布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 class="mb-4" align="center">自动换行的弹性布局</h3>
<h5 align="center">无自动换行效果</h5>
<div class="d-flex bg-warning text-white mb-4" >
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-danger">潮流T恤</div>
<div class="p-2 bg-danger">时尚女鞋</div>
<div class="p-2 bg-danger">男士外套</div>
<div class="p-2 bg-danger">新款男鞋</div>
<div class="p-2 bg-danger">司法拍卖</div>
</div>
<h5 align="center">flex-wrap：自动换行效果</h5>
<div class="d-flex bg-warning text-white mb-4 flex-wrap " >
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-danger">潮流T恤</div>
<div class="p-2 bg-danger">时尚女鞋</div>
<div class="p-2 bg-danger">男士外套</div>
<div class="p-2 bg-danger">新款男鞋</div>
<div class="p-2 bg-danger">司法拍卖</div>
</div>
<h5 align="center">flex-wrap-reverse：自动换行效果(从底部开始换行)</h5>
<div class="d-flex bg-warning text-white mb-4 flex-wrap-reverse">
<div class="p-2 bg-primary">首页</div>
<div class="p-2 bg-success">家用电器</div>
<div class="p-2 bg-danger">办公电脑</div>
<div class="p-2 bg-primary">男装女装</div>
<div class="p-2 bg-success">生鲜酒品</div>
<div class="p-2 bg-danger">箱包钟表</div>
<div class="p-2 bg-danger">潮流T恤</div>
<div class="p-2 bg-danger">时尚女鞋</div>
<div class="p-2 bg-danger">男士外套</div>
<div class="p-2 bg-danger">新款男鞋</div>
<div class="p-2 bg-danger">司法拍卖</div>
</div>
</body>
</html>
The running effect is shown in the figure below:
12-Set the order of elements in the flexible box
You can use the order-x class to implement the order setting of each element in the flexible box.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置弹性盒子内各元素的顺序</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置弹性盒子内各元素的顺序</h3>
<div class="d-flex bg-warning text-white">
<div class="order-3 p-2 bg-primary">首页</div>
<div class="order-2 p-2 bg-success">在线课程</div>
<div class="order-1 p-2 bg-danger">会员中心</div>
</div>
<div class="d-flex bg-warning text-white">
<div class="order-1 p-2 bg-primary">首页</div>
<div class="order-2 p-2 bg-success">在线课程</div>
<div class="order-3 p-2 bg-danger">会员中心</div>
</div>
</body>
</html>
The running effect is shown in the figure below:
