Bootstrap 5 Flex布局完全指南
专为编程小白设计的通俗易懂教程
主轴方向
交叉轴方向
Flex布局（弹性布局）是一种强大的CSS布局模型，可以让你轻松创建灵活、自适应的页面布局。
- 它可以让盒子排成一行或一列
- 它可以控制盒子之间的间距
- 它可以决定盒子是左对齐、居中还是右对齐
- 它可以自动调整盒子大小来填满空间
基础Flex容器示例：
代码：<div class=”d-flex”>
在Bootstrap中，只需要添加一个简单的类名（如 d-flex）就可以启用Flex布局。
- 简单易用：几行代码就能实现复杂布局
- 响应式：自动适应不同屏幕尺寸
- 灵活：轻松控制元素的位置、大小和顺序
- 解决传统布局问题：不再需要浮动(float)和清除浮动
- 空间分配：智能分配容器内的剩余空间
控制Flex容器内项目的排列方向。
核心类：
- flex-row：从左到右水平排列（默认）
- flex-row-reverse：从右到左水平排列
- flex-column：从上到下垂直排列
- flex-column-reverse：从下到上垂直排列
水平排列（默认）：
代码：d-flex flex-row（flex-row可省略）
水平反向排列：
代码：d-flex flex-row-reverse
垂直排列：
代码：d-flex flex-column
控制Flex项目沿主轴方向的对齐方式（水平方向默认情况下）。
核心类：
- justify-content-start：左对齐（默认）
- justify-content-end：右对齐
- justify-content-center：居中对齐
- justify-content-between：两端对齐，项目间距相等
- justify-content-around：项目周围间距相等
- justify-content-evenly：项目之间和周围的间距相等
居中对齐：
代码：d-flex justify-content-center
两端对齐：
代码：d-flex justify-content-between
均匀分布：
代码：d-flex justify-content-evenly
控制Flex项目沿交叉轴方向的对齐方式（垂直方向默认情况下）。
核心类：
- align-items-start：顶部对齐
- align-items-end：底部对齐
- align-items-center：垂直居中对齐
- align-items-baseline：基线对齐
- align-items-stretch：拉伸填充（默认）
垂直居中：
代码：d-flex align-items-center
底部对齐：
代码：d-flex align-items-end
单个项目对齐：
使用 align-self-* 类控制单个项目的对齐方式
代码：使用 align-self-start, align-self-center, align-self-end
让一个或多个项目填充容器的剩余空间。
核心类：
- flex-fill：项目填充剩余空间
- flex-grow-1：项目增长填充剩余空间
等宽项目：
代码：每个项目添加 flex-fill
特定项目填充：
代码：中间项目添加 flex-grow-1
控制项目在容器空间不足时如何换行。
核心类：
- flex-nowrap：不换行（默认）
- flex-wrap：换行
- flex-wrap-reverse：反向换行
不换行（默认）：
代码：d-flex flex-nowrap
换行：
代码：d-flex flex-wrap
改变Flex容器内项目的显示顺序。
核心类：
- order-0 到 order-5：设置项目顺序（数值越小越靠前）
- order-first：排在最前面（相当于order: -1）
- order-last：排在最后面（相当于order: 6）
改变项目顺序：
代码：使用 order-1, order-2, order-3
首尾项目交换：
代码：使用 order-first 和 order-last
使用自动边距在Flex容器中创建空间。
核心类：
- ms-auto：在项目左侧添加自动边距（向右推）
- me-auto：在项目右侧添加自动边距（向左推）
右侧对齐项目：
代码：ms-auto
居中分组：
代码：组合使用 me-auto 和 ms-auto
Bootstrap的Flex类可以添加响应式前缀，实现在不同屏幕尺寸下的布局控制。
响应式前缀：
- .d-sm-flex：在小屏幕及以上应用
- .d-md-flex：在中等屏幕及以上应用
- .d-lg-flex：在大屏幕及以上应用
- .d-xl-flex：在超大屏幕及以上应用
导航栏布局：
卡片网格布局：
卡片 1
内容描述
卡片 2
内容描述
卡片 3
内容描述
媒体对象布局：
用户名
这是一条评论内容。使用Flex布局创建媒体对象非常方便。
🎉 恭喜！你已经掌握了Bootstrap 5 Flex布局的核心知识！
开始动手实践，创建你自己的灵活布局吧！