flex buhu布局

Flex 布局是一种用于设计弹性盒子模型的 CSS3 属性。它可以让容器中的元素在任何方向上进行自动布局，并支持动态调整元素的大小和位置。

要使用 Flex 布局，首先需要将容器的 display 属性设置为 flex 或 inline-flex。然后，可以使用以下属性来控制容器内元素的布局：

1. flex-direction：指定主轴的方向，默认为水平方向（row），还可以设置为垂直方向（column）。
2. justify-content：指定主轴上元素的对齐方式，可以是 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，元素之间间距相等）、space-around（元素周围的空白间距相等）等。
3. align-items：指定交叉轴上元素的对齐方式，可以是 flex-start、flex-end、center、baseline（基线对齐）或 stretch（拉伸填充整个容器的高度）。
4. flex-wrap：指定是否换行，默认为 nowrap（不换行），还可以设置为 wrap（换行）或 wrap-reverse（反向换行）。
5. align-content：指定多行元素的对齐方式，只有在容器内有多行元素时才有效果，可以是 flex-start、flex-end、center、space-between、space-around 或 stretch。

以下是一个示例代码，展示如何使用 Flex 布局：

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
}

这个示例将会创建一个容器，其中包含了三个子元素。容器使用了 flex 属性，并且子元素的大小会自动调整，使得它们平分容器的可用空间。