display: flex 属性
时间: 2025-04-18 11:46:56 浏览: 38
### 使用 `display: flex` 创建弹性盒子布局
在 CSS 中,通过设置 `display: flex` 可以为一个容器启用弹性盒模型,使其内部子元素能够按照指定的方式自动调整位置和大小[^2]。
#### 定义父级容器为弹性容器
要使某个 HTML 元素成为弹性容器,需在其样式定义中加入 `display: flex`:
```css
.container {
display: flex;
}
```
这行声明使得 `.container` 下的所有直接子节点都成为了该弹性环境中的项目(item),它们会遵循一系列默认行为或由开发者自定义的行为进行排列[^3]。
#### 设置子项的排列方向
利用 `flex-direction` 属性可以控制这些项目的主轴方向,默认情况下是从左到右水平分布(row)。如果希望垂直堆叠,则应设为 column:
```css
/* 水平排列 */
.flex-container-row {
display: flex;
flex-direction: row; /* 默认值 */
}
/* 垂直排列 */
.flex-container-column {
display: flex;
flex-direction: column;
}
```
#### 控制子项之间的间距分配
为了更好地管理空间,在设置了 `display: flex` 的基础上还可以应用如下几个重要属性来微调各个 item 间的相对距离以及剩余空间的分发策略:
- **justify-content**: 主轴上的对齐方式(如 start、end、center 等)
- **align-items**: 交叉轴上的对齐方式(stretch 是默认选项意味着拉伸填满整个区域)
示例代码片段展示了如何组合运用上述概念构建简单的三栏式布局结构[^4]:
```html
<div class="main-content">
<div class="left-content"></div>
<div class="middle-content"></div>
<div class="right-content"></div>
</div>
<style>
.main-content {
width: 100%;
height: 100%;
background: #72f884;
display: flex;
justify-content: space-between; /* 子元素间均匀间隔 */
align-items: stretch; /* 跨越高度一致 */
}
.left-content,
.middle-content,
.right-content {
box-sizing: border-box;
width: 200px;
height: 200px;
}
</style>
```
此配置下三个 div 将被放置在同一行内,并且会在宽度上平均分开,同时保持相同的高度填充可用的空间。
阅读全文
相关推荐


















