display: flex;
时间: 2023-06-29 13:16:08 浏览: 51
`display: flex;` 是 CSS 中的一个属性,用于创建一个弹性容器(flex container)。这个容器中的子元素(flex items)会根据一定的规则排列。它是 CSS3 中新增的特性,用于进行响应式布局。
使用 `display: flex;` 可以实现以下的功能:
- 设置 flex 容器,使其内部子元素能够进行弹性布局;
- 简化布局,减少使用传统布局方式时需要进行的计算和调整;
- 支持水平和垂直居中;
- 支持对齐方式的设置;
- 支持弹性盒子的自适应能力。
使用 `display: flex;` 后,容器内部的子元素可以通过 `flex` 属性来控制它们的行为。`flex` 属性有三个关键字:`flex-grow`、`flex-shrink` 和 `flex-basis`,它们分别控制子元素的伸缩比例、收缩比例和初始大小。
例如,下面的代码将创建一个水平居中的容器,并设置两个子元素均分容器的宽度:
```css
.container {
display: flex;
justify-content: center;
}
.item {
flex: 1;
}
```
需要注意的是,`display: flex;` 的兼容性较好,但是在一些老版本的浏览器中可能需要添加 `-webkit-` 前缀,例如:
```css
.container {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
```