display flex是什么？

display:flex是CSS3中的一个属性，它可以将一个元素设置为弹性盒子容器，并可以通过设置子元素的属性来控制子元素的排列方式、对齐方式和间距等。使用display:flex可以方便地实现响应式布局和自适应布局。下面是一个简单的例子：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  margin: 10px;
}

在上面的例子中，我们将一个元素设置为弹性盒子容器，并设置了子元素的排列方式为水平方向，对齐方式为两端对齐，子元素之间的间距为自动计算。同时，我们还设置了子元素的flex属性为1，表示子元素的宽度会根据容器的宽度自动调整，间距为10px。

相关问题

微信小程序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;
}