弹性容器布局是CSS3引入的flexbox布局模型的核心能力，通过给父元素设置弹性属性，可以让子元素按照设定的规则自动调整尺寸和位置，适配不同的屏幕尺寸，大幅降低传统浮动布局带来的兼容性和排版复杂度问题。
开启弹性容器
要启用弹性容器布局，只需要给目标父元素设置display: flex或者display: inline-flex属性即可。其中display: flex会让容器本身表现为块级元素，display: inline-flex会让容器表现为行内块级元素，两者的子元素都会成为弹性项目，遵循弹性布局规则。
基础的开启弹性容器的代码如下：
/* 块级弹性容器 */
.flex-container {
display: flex;
width: 100%;
height: 200px;
background-color: #f5f5f5;
}
/* 行内弹性容器 */
.inline-flex-container {
display: inline-flex;
width: 300px;
height: 150px;
background-color: #e8f4ff;
}
核心弹性属性说明
flex-direction 主轴方向
该属性用于设置弹性项目在主轴上的排列方向，可选值有row（默认值，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。
.flex-container {
display: flex;
/* 设置主轴为垂直方向 */
flex-direction: column;
background-color: #f5f5f5;
}
justify-content 主轴对齐方式
该属性用于设置弹性项目在主轴上的对齐方式，可选值包括：
flex-start：默认值，项目靠主轴起点对齐flex-end：项目靠主轴终点对齐center：项目在主轴居中对齐space-between：项目两端对齐，中间间隔相等space-around：每个项目两侧的间隔相等space-evenly：项目之间、项目与容器边缘的间隔完全相等
对应的代码示例：
.flex-container {
display: flex;
/* 主轴居中对齐 */
justify-content: center;
background-color: #f5f5f5;
}
align-items 交叉轴对齐方式
该属性用于设置弹性项目在交叉轴（与主轴垂直的轴）上的对齐方式，可选值包括：
stretch：默认值，项目拉伸填满交叉轴（如果项目未设置固定尺寸）flex-start：项目靠交叉轴起点对齐flex-end：项目靠交叉轴终点对齐center：项目在交叉轴居中对齐baseline：项目按第一行文字的基线对齐
.flex-container {
display: flex;
/* 交叉轴居中对齐 */
align-items: center;
height: 200px;
background-color: #f5f5f5;
}
完整示例
以下是一个完整的弹性容器布局示例，实现水平垂直居中排列三个子元素的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性容器布局示例</title>
<style>
.container {
display: flex;
/* 主轴水平排列 */
flex-direction: row;
/* 主轴居中对齐 */
justify-content: center;
/* 交叉轴居中对齐 */
align-items: center;
width: 100%;
height: 300px;
background-color: #f0f0f0;
}
.item {
width: 80px;
height: 80px;
margin: 0 10px;
background-color: #409eff;
color: #fff;
text-align: center;
line-height: 80px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>
</body>
</html>
弹性项目的常用属性
除了容器的属性，还可以给弹性项目单独设置属性调整自身表现：
flex-grow：项目的放大比例，默认0，即不放大flex-shrink：项目的缩小比例，默认1，空间不足时项目会缩小flex-basis：项目在分配多余空间之前占据的主轴空间，默认autoflex：是flex-grow、flex-shrink、flex-basis的简写，推荐直接使用该属性align-self：覆盖容器的align-items属性，单独设置当前项目的交叉轴对齐方式
例如让第二个项目占据剩余空间，第三个项目靠交叉轴底部对齐：
.item:nth-child(2) {
/* 占据剩余空间 */
flex: 1;
}
.item:nth-child(3) {
/* 单独设置交叉轴底部对齐 */
align-self: flex-end;
}
cssflexbox弹性容器justify_contentalign_items修改时间：2026-07-12 23:12:14