Notas de estudio de diseño de caja flexible de Bootstrap

Tabla de contenido

01-Descripción general
02-Utilice la clase d-flex y la clase d-inline-flex para definir el contenedor como una caja flexible
03- Establecer el orden de los elementos del contenedor flexible en dirección horizontal.
03- Disponer los elementos del contenedor flexible en dirección vertical.
04-Alineación de todos los elementos de la caja flexible en la dirección del eje principal.
05-1-La alineación de cada fila en la caja flexible en la dirección del eje transversal
05-2-La alineación del contenido de varias líneas en la caja flexible en la dirección del eje transversal
06-Establecer por separado la alineación de un elemento en el contenedor flexible en el eje transversal
07-Distribuya el espacio restante del contenedor por igual (llene el diseño del contenedor)
08-Establece un elemento para que ocupe la mayor cantidad de espacio restante posible
09- Diseño flotante en dirección horizontal (alineado a la izquierda, alineado a la derecha)
10- Diseño flotante en dirección vertical (alineado arriba y alineado abajo)
11-Ajuste de línea automático
12-Establecer el orden de los elementos en la caja flexible

01-Descripción general

Flexbox de Bootstrap es un modelo de diseño para crear diseños flexibles y responsivos. Su implementación en Bootstrap hace que la creación de diseños de páginas web complejos sea mucho más fácil y controlable. Las siguientes son las características principales de Bootstrap flex box:

Diseño flexible: el modelo de caja flexible permite expandir y organizar libremente los subelementos dentro del contenedor para adaptarse a diferentes tamaños de pantalla y dispositivos.
Centrado horizontal y vertical: Flexbox de Bootstrap admite una fácil alineación central de elementos horizontal y verticalmente sin utilizar CSS complejo.
Control de orden: puede cambiar fácilmente el orden en el que se organizan los elementos secundarios en un contenedor ajustando su orden sin cambiar la estructura HTML.
Ancho de columna adaptable: Flexbox permite que las columnas dentro del contenedor adapten su ancho para llenar el espacio disponible sin especificar un ancho de columna fijo.
Ajustar: cuando los elementos secundarios no caben en una línea del contenedor, se ajustan a la siguiente línea sin desbordarse ni superponerse.
Asignación de espacio: puede asignar el espacio disponible ajustando los pesos entre los elementos secundarios de Flexbox para lograr diferentes proporciones de ancho entre diferentes elementos.
Control de alineación y espaciado: Flexbox le permite controlar con precisión la alineación y el espaciado de los elementos secundarios dentro del contenedor.
Soporte de anidamiento: puede anidar varios contenedores flexbox para crear diseños más complejos.

En resumen, el modelo flexbox de Bootstrap proporciona una herramienta poderosa que simplifica el desarrollo de diseños web y los hace más flexibles y responsivos. Es una de las herramientas esenciales para crear interfaces web modernas, especialmente para proyectos que necesitan adaptarse a diferentes tamaños de pantalla y dispositivos. En Bootstrap 4 y Bootstrap 5, Flexbox se ha convertido en el modelo de diseño predeterminado, por lo que puedes aprovechar fácilmente sus capacidades para crear una amplia variedad de diseños.

02-Utilice la clase d-flex y la clase d-inline-flex para definir el contenedor como una caja flexible

En la función de caja flexible de Bootstrap, los contenedores decorativos d-flex y d-inline-flex se utilizan principalmente para definir cajas flexibles.

P: ¿Cuál es la diferencia entre la clase d-flex de Bootstrap y la clase d-inline-flex?
respuesta:

d-flexClase: esta clase se utiliza para configurar el elemento en modo de visualización "flexible", lo que convierte al elemento en un contenedor flexible y los subelementos internos se pueden organizar utilizando el diseño Flexbox. Esto significa que el elemento ocupará todo el ancho disponible, normalmente una fila dentro del contenedor, llenando el espacio horizontal restante. Los elementos secundarios se apilan en una fila de forma predeterminada, organizados de acuerdo con las reglas del contenedor flexible.
d-inline-flexClase: esta clase también configura el elemento en modo de visualización "flexible", pero a diferencia de d-flex, convertirá el elemento en un contenedor flexible en línea, es decir, el elemento no ocupará todo el ancho disponible, sino que se mostrará en línea. d-inline-flexEsto significa que se pueden mostrar varios elementos uno al lado del otro en la misma fila, con los elementos secundarios organizados de acuerdo con las reglas del contenedor flexible en línea.

Resumen de diferencias:

d-flexHace que el elemento ocupe todo el ancho disponible, generalmente una fila dentro del contenedor, llenando el espacio horizontal restante.
d-inline-flexConvierte los elementos en un contenedor flexible en línea. Los elementos se muestran uno al lado del otro en la misma línea, sin ocupar todo el ancho disponible, y se organizan de acuerdo con las reglas del contenedor flexible en línea.

Puede elegir una de estas dos clases según sea necesario para controlar cómo se muestra el elemento y convertirlo en un elemento a nivel de bloque o en línea según sus requisitos de diseño.

El código de muestra es el siguiente:

<!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>

Para conocer el significado de "p-3" en el código, visite la publicación del blog: https://blog.csdn.net/wenhao_ir/article/details/132666590 .
El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí

03- Establecer el orden de los elementos del contenedor flexible en dirección horizontal.

Puede usar la clase flex-row para configurar los elementos del contenedor flexible para que se organicen de izquierda a derecha. Por supuesto, el valor predeterminado también está organizado de izquierda a derecha.
Puede utilizar la clase flex-row-reverse para organizar los elementos de un contenedor flexible de derecha a izquierda.
El código de muestra es el siguiente:

<!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>

El efecto de ejecución es el siguiente:
Insertar descripción de la imagen aquí

03- Disponer los elementos del contenedor flexible en dirección vertical.

Puede usar la clase flex-column para configurar los elementos del contenedor flexible para que se organicen de arriba a abajo. Por supuesto, el valor predeterminado también es organizarlos de arriba a abajo.
Puede utilizar la clase flex-row-reverse para organizar los elementos de un contenedor flexible de abajo hacia arriba.
El código de muestra es el siguiente:

<!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>

El efecto de ejecución es el siguiente:
Insertar descripción de la imagen aquí

04-Alineación de todos los elementos de la caja flexible en la dirección del eje principal.

Se pueden utilizar las siguientes cinco clases para lograr la "alineación de todos los elementos en el cuadro flexible en la dirección del eje principal":
justificar-contenido-iniciar
justificar-contenido-centro
justificar-contenido-final
justificar-contenido-entre
justificar-contenido-alrededor
código de ejemplo de la siguiente manera:

<!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>

Para obtener una introducción detallada a la clase mb-3 en este código de muestra, consulte la publicación del blog: https://blog.csdn.net/wenhao_ir/article/details/132666590

¿Qué es un huso?
Consulte la publicación del blog: https://blog.csdn.net/wenhao_ir/article/details/133357422
El efecto de la operación se muestra en la siguiente figura:
Insertar descripción de la imagen aquí

05-1-La alineación de cada fila en la caja flexible en la dirección del eje transversal

El código de muestra es el siguiente:

<!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>

¿Qué es un eje transversal?
Consulte la publicación del blog: https://blog.csdn.net/wenhao_ir/article/details/133357422

Con respecto al concepto de línea base y la alineación de línea base de elementos secundarios dentro de su contenedor principal , consulte la publicación del blog:
https://blog.csdn.net/wenhao_ir/article/details/133343442
El efecto de la operación es el siguiente:
Insertar descripción de la imagen aquí

05-2-La alineación del contenido de varias líneas en la caja flexible en la dirección del eje transversal

Los objetos procesados por cada clase en 05-1 son líneas individuales, mientras que los objetos procesados por las clases en 05-2 son líneas múltiples consecutivas.
El código de muestra es el siguiente:

<!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>

El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí
Reemplazamos las clases en este ejemplo con cada clase en 5-1, es decir, la clase que procesa la unidad por línea. El código es el siguiente:
Reemplazamos las clases en este ejemplo con las clases en 5-1 Cada clase, es decir, la clase que procesa la unidad por fila, el código es el siguiente:
Reemplazamos las clases en este ejemplo con cada clase en 5-1, es decir, la clase que procesa la unidad por fila, el código es el siguiente:

<!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>

El efecto de ejecución es el siguiente:
Insertar descripción de la imagen aquí

06-Establecer por separado la alineación de un elemento en el contenedor flexible en el eje transversal

En el punto 05 lo que se establece es la alineación de todos los elementos de todo el contenedor en la intersección.
Puede utilizar la siguiente clase para establecer la alineación de un elemento en un contenedor flexible en la cruz.
align-self-start
align-self-center
align-self-end
align-self-baseline
align-self-stretch
Si desea hacer un buen uso de las clases de alineación automática anteriores, debe comprender qué es un eje transversal. Para conocer el concepto de eje transversal, consulte mi otra publicación de blog: https://blog.csdn.net/wenhao_ir/article/details/133357422
El código de muestra es el siguiente:

<!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>

El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí

07-Distribuya el espacio restante del contenedor por igual (llene el diseño del contenedor)

Puede usar la clase flex-fill para distribuir uniformemente el espacio restante del contenedor (llenar el diseño del contenedor),
el código de muestra es el siguiente:

<!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>

El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí

08-Establece un elemento para que ocupe la mayor cantidad de espacio restante posible

Puede utilizar las clases flex-grow-1 y w-100 para configurar un elemento para que ocupe la mayor cantidad de espacio restante posible.
El código de muestra es el siguiente:

<!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>

El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí

09- Diseño flotante en dirección horizontal (alineado a la izquierda, alineado a la derecha)

Puede utilizar la clase mr-auto y la clase ml-auto para lograr la alineación izquierda y derecha de los elementos en el contenedor, respectivamente.
La clase mr-auto se presenta de la siguiente manera:
En Bootstrap, mr-autoes una clase utilizada para ajustar la alineación horizontal. Específicamente, mr-autose aplica una clase a un elemento (generalmente la clase CSS de un elemento) para establecer el margen derecho del elemento en automático, lo que hace que el elemento a su derecha esté horizontal dentro de su contenedor Alinear a la derecha .

Esto se usa a menudo en el sistema de cuadrícula de Bootstrap para empujar elementos a la derecha de un elemento a la derecha de su contenedor para lograr un efecto de alineación horizontal.
Introducción a la clase ml-auto: abreviada.
El código de muestra es el siguiente:

<!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>

El efecto de ejecución es el siguiente:
Insertar descripción de la imagen aquí

10- Diseño flotante en dirección vertical (alineado arriba y alineado abajo)

Puede utilizar las clases mb-auto y mt-auto para lograr la alineación inferior y superior de otros elementos. mb es la abreviatura de margin-bottom y mt es la contracción de margin-top.
Después de entender a mr-atuo en el noveno, puedes entender estos dos, así que no entraré en detalles aquí.
El código se muestra a continuación:

<!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>

El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí

11-Ajuste de línea automático

Puede utilizar las clases flex-wrap y flex-wrap-reverse para implementar el ajuste automático de líneas.
Las dos clases se presentan de la siguiente manera:
La clase Bootstrap flex-wrapes una clase utilizada para controlar cómo los elementos en el diseño de Flexbox se ajustan en el contenedor. Flexbox es un modelo de diseño flexible que permite que los elementos de un contenedor ajusten automáticamente su posición en diferentes orientaciones para adaptarse al espacio disponible. flex-wrapLas clases tienen tres valores posibles:

flex-nowrap(Predeterminado): Los artículos no se envuelven, se comprimen en una línea tanto como sea posible, incluso si exceden los límites del contenedor.
flex-wrap: Los elementos se ajustarán según sea necesario. Si el contenedor no es lo suficientemente ancho para acomodar todos los elementos, algunos elementos se ajustarán automáticamente a la siguiente línea.
flex-wrap-reverse: flex-wrapSimilar a , pero los artículos se envuelven desde el fondo del contenedor hacia arriba.

Estas clases se utilizan a menudo con el sistema de cuadrícula de Bootstrap para controlar cómo se distribuyen las columnas en diferentes tamaños de pantalla. Por ejemplo, puede usar flex-nowrapla clase para asegurarse de que las columnas no se ajusten en pantallas más pequeñas, y en pantallas más grandes puede usar la flex-wrapclase para permitir que las columnas se ajusten para ajustarse al ancho de la pantalla más grande.
El código de muestra es el siguiente:

<!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>

El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí

12-Establecer el orden de los elementos en la caja flexible

Puede utilizar la clase order-x para implementar la configuración de orden de cada elemento en el cuadro flexible.
El código de muestra es el siguiente:

<!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>

El efecto de ejecución se muestra en la siguiente figura:
Insertar descripción de la imagen aquí