display: flex;是什么作用？

`display: flex;` 是 CSS 中的一个布局属性，用于创建弹性布局（Flexbox）。

当你将一个元素的 `display` 属性设置为 `flex` 时，该元素将成为一个容器，并且其子元素将按照弹性布局的规则进行排列。

`flex` 布局具有以下特点：
- 元素的子元素将默认以水平方向排列，可以通过设置 `flex-direction` 属性来改变排列方向。
- 子元素可以根据需要自动调整大小，填充可用空间。
- 可以通过 `justify-content` 和 `align-items` 属性控制子元素在主轴和交叉轴上的对齐方式。
- 可以通过 `flex-wrap` 属性来控制子元素是否换行。
- 可以使用 `flex-grow`、`flex-shrink` 和 `flex-basis` 属性来调整子元素的增长、收缩和初始大小。

使用 `display: flex;` 可以方便地创建灵活的、响应式的布局，适用于各种页面组件和布局需求。

相关问题

微信小程序less代码，display: inline-flex与display: flex 有什么区别？

display: inline-flex和display: flex都是用于设置元素的布局方式为弹性盒子（flexbox）模型。它们的区别在于元素的行为方式不同。

display: inline-flex会将元素视为内联元素，类似于span或a标签，可以与其他内联元素放在同一行。它使得元素可以根据可用空间自动调整大小，并且元素之间默认是不换行的。

display: flex会将元素视为块级元素，类似于div或p标签，占据一行的全部宽度。它使得元素会在主轴方向上填充可用空间，并且元素之间默认是换行的。

.container { display: flex; }display:除了flex还有什么选项？

除了`flex`之外，`display`属性还有以下选项：
- `block`：元素将被显示为块级元素，占据一行的全部宽度。
- `inline`：元素将被显示为内联元素，不会独占一行，而是与其他元素在同一行显示。
- `inline-block`：元素将被显示为内联块级元素，不会独占一行，但可以设置宽度和高度。
- `none`：元素将被隐藏，不会在页面上显示。

以下是一个例子：

.container {
  display: block;
}