CSS Flexbox布局通过弹性容器和弹性子元素的配合，能够灵活实现各类宽高自适应效果，适配不同屏幕尺寸的内容展示需求。理解容器属性和子元素属性的联动逻辑，是实现稳定自适应布局的关键。
Flexbox容器的基础配置
首先要将目标容器设置为弹性容器，通过display: flex属性开启Flexbox布局，此时容器的直接子元素会自动成为弹性子元素。容器的核心属性会影响所有子元素的自适应规则。
容器核心属性说明
| 属性名 | 可选值 | 对自适应宽高的影响 |
|---|---|---|
| flex-direction | row, row-reverse, column, column-reverse | 决定主轴方向，主轴方向决定子元素自适应宽高的基准方向 |
| flex-wrap | nowrap, wrap, wrap-reverse | 决定子元素超出容器时是否换行，换行会影响子元素的高度自适应逻辑 |
| justify-content | flex-start, flex-end, center, space-between, space-around | 控制子元素在主轴方向的对齐与剩余空间分配，影响宽度自适应表现 |
| align-items | flex-start, flex-end, center, stretch, baseline | 控制子元素在交叉轴方向的对齐方式，默认stretch会让子元素高度自适应填满容器 |
Flexbox子元素的宽高自适应规则
弹性子元素的宽高自适应主要通过flex属性组合实现，该属性是flex-grow、flex-shrink、flex-basis的简写形式。
子元素核心属性说明
- flex-grow：默认值为0，取值为非负整数，表示子元素分配剩余空间的权重，值越大分配到的剩余空间越多，宽度/高度自适应扩展越多
- flex-shrink：默认值为1，取值为非负整数，表示子元素空间不足时的收缩权重，值越大收缩比例越高
- flex-basis：默认值为auto，表示子元素在分配剩余空间前的初始大小，设置为具体数值时会优先作为基准尺寸
常见自适应场景代码示例
场景1：子元素宽度自适应填满容器
设置容器为横向排列，子元素通过flex-grow分配剩余空间，实现宽度自适应。
/* 容器样式 */
.flex-container {
display: flex;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
/* 子元素样式 */
.flex-item {
height: 100%;
/* flex-grow:1 表示所有子元素平分剩余宽度 */
flex: 1;
border: 1px solid #666;
}
<div class="flex-container">
<div class="flex-item">子元素1</div>
<div class="flex-item">子元素2</div>
<div class="flex-item">子元素3</div>
</div>
场景2：子元素高度自适应填满容器
设置容器为纵向排列，子元素开启高度自适应扩展，实现高度随容器变化。
/* 容器样式 */
.flex-container {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid #ccc;
}
/* 子元素样式 */
.flex-item {
width: 100%;
/* 高度自适应扩展填满剩余空间 */
flex-grow: 1;
border: 1px solid #666;
}
/* 第一个子元素固定高度，其余自适应 */
.flex-item:first-child {
flex-grow: 0;
height: 100px;
}
<div class="flex-container">
<div class="flex-item">固定高度子元素</div>
<div class="flex-item">自适应高度子元素1</div>
<div class="flex-item">自适应高度子元素2</div>
</div>
场景3：子元素按权重分配宽高
设置不同子元素的flex-grow值，实现按权重分配自适应空间。
.flex-container {
display: flex;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
/* 第一个子元素宽度权重为1 */
.item1 {
flex: 1;
border: 1px solid #666;
}
/* 第二个子元素宽度权重为2，分配到的空间是第一个的2倍 */
.item2 {
flex: 2;
border: 1px solid #666;
}
/* 第三个子元素宽度权重为1 */
.item3 {
flex: 1;
border: 1px solid #666;
}
注意事项
当子元素设置了固定宽高时，flex-grow和flex-shrink的效果会受影响，固定尺寸会优先于自适应规则生效。如果容器设置了align-items: stretch，子元素未设置交叉轴方向的尺寸时会自动填满容器交叉轴空间，若子元素设置了对应方向的固定尺寸则会覆盖该默认行为。在换行场景下，每行的子元素会独立计算自适应规则，不会跨行分配空间。
CSSFlexboxflex_containerflex_item自适应布局修改时间：2026-06-29 15:00:17