CSS 弹性布局（Flexbox）是一种用于构建响应式布局和对齐元素的强大工具。通过 Flexbox，可以轻松地控制子元素在容器内的对齐方式、排列顺序和尺寸等。以下是一些常用的 CSS 弹性布局设置方式和技巧。
1. 基础结构
首先，我们定义一个容器并为其设置 display: flex，使得它的子元素成为弹性布局项目（flex items）。
<div class="flex-container">
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
<div class="flex-item">项目 3</div>
</div>
.flex-container {
display: flex; /* 开启弹性布局 */
}
.flex-item {
flex: 1; /* 每个项目占据同样的空间 */
}
2. 控制子元素的排列方式
2.1 水平排列（默认）
在 display: flex 下，子元素默认是水平方向排列的。你不需要额外设置，除非想改变方向。
.flex-container {
display: flex;
justify-content: flex-start; /* 默认：项目靠左对齐 */
}
2.2 垂直排列（改变主轴方向）
可以使用 flex-direction 属性来改变主轴的方向（默认是水平）。
row：默认，水平排列（从左到右）column：垂直排列（从上到下）row-reverse：水平排列，反向（从右到左）column-reverse：垂直排列，反向（从下到上）
.flex-container {
display: flex;
flex-direction: column; /* 改为垂直排列 */
}
3. 子元素对齐方式
3.1 justify-content（主轴对齐）
justify-content 用于控制子元素在主轴（默认是水平方向）上的对齐方式。常用值有：
flex-start：项目靠左对齐（默认）flex-end：项目靠右对齐center：项目居中对齐space-between：项目之间均匀分布，第一个项目放在容器的起始位置，最后一个项目放在容器的结束位置space-around：项目之间均匀分布，每个项目两侧的空隙相等space-evenly：项目之间的间隙相等，包括两侧的空隙
.flex-container {
display: flex;
justify-content: center; /* 主轴居中对齐 */
}
3.2 align-items（交叉轴对齐）
align-items 用于控制子元素在交叉轴（垂直方向）上的对齐方式。常用值有：
flex-start：项目在交叉轴的起始位置对齐flex-end：项目在交叉轴的结束位置对齐center：项目在交叉轴上居中对齐baseline：项目的基线对齐stretch：项目默认拉伸以填满容器（如果没有设置固定高度）
.flex-container {
display: flex;
align-items: center; /* 交叉轴居中对齐 */
}
3.3 align-self（单个项目在交叉轴上的对齐）
align-self 允许单个项目在交叉轴上的对齐方式覆盖容器设置的 align-items。常用值与 align-items 相同。
.flex-item {
align-self: flex-end; /* 单个项目在交叉轴上靠下对齐 */
}
4. 控制子元素的尺寸
4.1 flex-grow（增长因子）
flex-grow 定义了子元素在容器中剩余空间中的增长比例。默认为 0，意味着项目不增长。若设置为 1 或更大的值，元素将按比例占据可用空间。
.flex-item {
flex-grow: 1; /* 让每个子元素均分剩余空间 */
}
4.2 flex-shrink（收缩因子）
flex-shrink 定义了子元素在容器空间不足时的收缩比例。默认为 1，意味着项目会根据容器的空间不足自动缩小。如果设置为 0，则不缩小。
.flex-item {
flex-shrink: 0; /* 项目不收缩 */
}
4.3 flex-basis（基础尺寸）
flex-basis 设置子元素的初始尺寸，类似于 width 或 height，但是它在弹性布局中起到初始尺寸的作用。它会影响 flex-grow 和 flex-shrink 的计算。
.flex-item {
flex-basis: 200px; /* 设置每个子元素的初始宽度为 200px */
}
4.4 flex（简写属性）
flex 是一个简写属性，用来同时设置 flex-grow, flex-shrink 和 flex-basis。常见用法是设置成 1，让元素均分空间。
.flex-item {
flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
}
5. 控制子元素的顺序
5.1 order（排列顺序）
order 属性控制子元素的排列顺序，默认值是 0。通过改变 order 值，可以让元素的顺序改变，而不影响它们在 HTML 中的位置。
.flex-item:nth-child(1) {
order: 2; /* 将第一个项目移到最后 */
}
.flex-item:nth-child(2) {
order: 1; /* 将第二个项目排在最前面 */
}
6. 使用弹性布局的常见组合
6.1 垂直居中的容器
可以通过 justify-content 和 align-items 来快速实现垂直和水平居中对齐。
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置容器的高度为 100% 屏幕高度 */
}
6.2 等高列布局
通过设置 flex-grow 为 1，可以实现等高列布局。
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1; /* 所有项目将分配相同的剩余空间 */
}
总结
CSS 弹性布局（Flexbox）是一个非常强大的工具，能帮助你轻松控制元素的排列、对齐和尺寸。常用的弹性布局属性包括：
display: flex：启用弹性布局。flex-direction：控制主轴方向（水平或垂直）。justify-content：控制主轴上的对齐方式。align-items：控制交叉轴上的对齐方式。flex-grow,flex-shrink,flex-basis：控制子元素的尺寸和增长行为。order：控制子元素的排列顺序。
通过灵活组合这些属性，可以快速实现复杂的布局和对齐效果，特别适用于响应式设计和动态调整布局的场景。
发表回复