display: flex;

`display: flex;` 是 CSS 中的一个属性，用于创建一个弹性容器（flex container）。这个容器中的子元素（flex items）会根据一定的规则排列。它是 CSS3 中新增的特性，用于进行响应式布局。

使用 `display: flex;` 可以实现以下的功能：

- 设置 flex 容器，使其内部子元素能够进行弹性布局；
- 简化布局，减少使用传统布局方式时需要进行的计算和调整；
- 支持水平和垂直居中；
- 支持对齐方式的设置；
- 支持弹性盒子的自适应能力。

使用 `display: flex;` 后，容器内部的子元素可以通过 `flex` 属性来控制它们的行为。`flex` 属性有三个关键字：`flex-grow`、`flex-shrink` 和 `flex-basis`，它们分别控制子元素的伸缩比例、收缩比例和初始大小。

例如，下面的代码将创建一个水平居中的容器，并设置两个子元素均分容器的宽度：

.container {
  display: flex;
  justify-content: center;
}
.item {
  flex: 1;
}

需要注意的是，`display: flex;` 的兼容性较好，但是在一些老版本的浏览器中可能需要添加 `-webkit-` 前缀，例如：

.container {
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: center;
}

相关问题

display:flex

display:flex是CSS中的一个属性，用于指定元素的布局方式为弹性布局。通过设置display:flex，可以创建一个包含弹性元素的容器，并指定这些弹性元素的排列方式和对齐方式。在引用中，通过实例代码展示了使用display:flex和display:inline-flex的效果。

在引用中的样例代码中，设置了display:flex属性，并使用justify-content:flex-end将子元素右对齐。而在引用中的样例代码中，设置了display:flex属性，并使用flex-wrap:wrap实现了子元素的换行。

display: flex

display: flex 是CSS的一种属性，用于设置一个元素的布局方式为弹性盒子模型。

使用 display: flex 可以让一个元素的子元素按照一定的规则排列，并且可以通过设置各个子元素的属性来控制它们的大小、位置和对齐方式等。

Flex布局的优点是可以方便地实现响应式布局，使得页面的排版更加灵活和适应不同屏幕尺寸的设备。