div布局flex详细示例

当使用flex布局时，父元素（容器）和子元素（项目）的属性设置会影响整个布局。下面是一个示例，演示如何使用flex布局来创建一个简单的网页布局：

HTML代码：

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

CSS代码：

.container {
  display: flex; /* 设置容器为flex布局 */
  justify-content: space-between; /* 水平方向上均匀分布项目 */
  align-items: center; /* 垂直方向上居中对齐项目 */
}

.item {
  flex: 1; /* 项目自动填充剩余空间 */
  height: 100px;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 100px;
}

在这个示例中，`.container` 是父元素（容器），`.item` 是子元素（项目）。通过设置`.container` 的 `display` 属性为 `flex`，我们将其设置为flex布局。

接下来，我们使用 `justify-content` 属性来设置水平方向上的对齐方式为 `space-between`，这会使得项目1和项目3分别位于容器的最左边和最右边，同时在它们之间均匀分布剩余的空间。

然后，我们使用 `align-items` 属性来设置垂直方向上的对齐方式为 `center`，这会使得所有项目在垂直方向上居中对齐。

对于 `.item` ，我们使用 `flex: 1` 属性来让项目自动填充剩余的空间。我们还设置了项目的高度、背景颜色、文本居中等样式。

通过这些设置，我们可以实现一个简单的flex布局，其中三个项目在水平方向上均匀分布，垂直方向上居中对齐。你可以根据需要进行调整和扩展。