diaplay flex子元素

要在父元素中使用 flex 布局，需要设置父元素的 display 属性为 flex。然后，子元素可以使用 flex 属性来控制它们在父元素中的布局。例如，可以使用 flex-grow 属性来指定子元素在可用空间中所占的比例。

以下是一个简单的示例：

HTML 代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS 代码：

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

这将使三个子元素平均分配可用空间。

相关问题

display flex 子元素高度

在使用 `display: flex` 属性时，子元素的高度默认是根据内容自适应的。但是，你可以通过设置子元素的 `height` 属性来改变其高度。

如果你希望所有子元素具有相同的高度，可以使用 `align-items: stretch` 属性。这会拉伸子元素使其填充整个容器的高度。

例如：

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  height: 100%; /* 或者其他你想要的高度值 */
}

这样，所有子元素将会具有相同的高度，填充整个容器的高度。

css display flex 子元素居中

可以使用 flex 布局的 align-items 和 justify-content 属性来实现子元素的居中。

具体来说，如果想要让子元素在主轴和交叉轴上都居中，可以这样设置：

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

如果只想在主轴上居中，可以这样设置：

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
}

如果只想在交叉轴上居中，可以这样设置：

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
}