在css布局中，display:flex是创建弹性容器的核心属性，只需要给父元素设置该属性，就能让子元素按照弹性布局规则排列，大幅简化对齐、分布等常见布局操作。弹性布局的核心逻辑是让容器内的子元素可以灵活调整自身大小、位置和间距，适配不同的屏幕尺寸。
创建基础弹性容器
创建弹性容器的方式非常简单，只需要给目标父元素添加display: flex样式即可，添加后该元素就会成为弹性容器，其直接子元素会自动成为弹性项目，默认沿主轴水平排列。
下面是一个最基础的弹性容器创建示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 创建弹性容器 */
.flex-container {
display: flex;
width: 500px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* 弹性项目样式 */
.flex-item {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</body>
</html>
弹性容器的核心属性
创建弹性容器后，还可以通过设置容器的相关属性，调整弹性项目的排列方向、对齐方式、换行规则等，以下是常用的容器属性：
flex-direction 主轴方向
该属性用来设置弹性项目的排列方向，也就是主轴的方向，默认值为row（水平从左到右）。可选值如下：
row：默认值，主轴为水平方向，起点在左端row-reverse：主轴为水平方向，起点在右端column：主轴为垂直方向，起点在上沿column-reverse：主轴为垂直方向，起点在下沿
示例代码如下：
/* 垂直排列弹性项目 */
.flex-container {
display: flex;
flex-direction: column;
width: 300px;
height: 400px;
background-color: #f5f5f5;
}
.flex-item {
width: 80px;
height: 80px;
background-color: #2196F3;
margin: 10px;
}
justify-content 主轴对齐方式
该属性用来定义弹性项目在主轴上的对齐方式，可选值包括：
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，项目向主轴起点对齐 |
| flex-end | 项目向主轴终点对齐 |
| center | 项目在主轴居中对齐 |
| space-between | 项目两端对齐，项目之间间隔相等 |
| space-around | 每个项目两侧的间隔相等，项目之间间隔是项目与容器边缘间隔的2倍 |
实现水平居中对齐的代码示例：
.flex-container {
display: flex;
justify-content: center; /* 主轴居中对齐 */
width: 600px;
height: 150px;
background-color: #eee;
}
.flex-item {
width: 80px;
height: 80px;
background-color: #FF9800;
margin: 0 5px;
}
align-items 交叉轴对齐方式
交叉轴是和主轴垂直的轴，该属性用来定义弹性项目在交叉轴上的对齐方式，默认值为stretch（项目未设置高度时拉伸填满容器高度）。
实现垂直居中对齐的示例：
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 500px;
height: 300px;
background-color: #f0f8ff;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #9C27B0;
color: white;
text-align: center;
line-height: 100px;
}
flex-wrap 换行规则
默认情况下弹性项目会排在一行，设置flex-wrap可以让项目在空间不足时换行，可选值：
nowrap：默认值，不换行wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方
换行示例：
.flex-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
width: 300px;
background-color: #fafafa;
border: 1px solid #ddd;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #E91E63;
margin: 10px;
color: white;
text-align: center;
line-height: 100px;
}
实际应用场景示例
弹性容器最常见的应用场景是导航栏布局，以下是用display:flex实现水平导航栏的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.nav {
display: flex;
justify-content: space-around; /* 导航项均匀分布 */
align-items: center;
width: 100%;
height: 60px;
background-color: #333;
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
color: white;
cursor: pointer;
padding: 0 20px;
line-height: 60px;
}
.nav li:hover {
background-color: #555;
}
</style>
</head>
<body>
<ul class="nav">
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</body>
</html>
使用display:flex创建弹性容器后，不需要再写浮动清除代码，也不用计算复杂的边距，就能快速实现各种布局需求，是前端开发中非常实用的布局方案。
cssflexdisplay_flex弹性容器修改时间：2026-07-19 22:12:40