html的flex嵌套

HTML中的flex布局是通过CSS中的flex属性来实现的，具体使用方式如下：

首先，在父元素上设置display:flex，让它变成一个flex容器：

<div class="flex-container">
  <div class="flex-item">子元素1</div>
  <div class="flex-item">子元素2</div>
  <div class="flex-item">子元素3</div>
</div>

.flex-container {
  display: flex;
}

然后，可以在子元素上设置flex属性，来控制它们在父元素中的排列方式。这里列出几个常用的排列方式：

1. 在水平方向上排列（默认方向为水平方向）

.flex-item {
  flex: 1; /* 子元素占用剩余空间 */
}

2. 在垂直方向上排列

.flex-container {
  flex-direction: column; /* 父容器设置为垂直方向排列 */
}
.flex-item {
  flex: 1; /* 子元素占用剩余空间 */
}

3. 嵌套排列

<div class="flex-container">
  <div class="flex-item">
    <div class="nested-container">
      <div class="nested-item">子元素1.1</div>
      <div class="nested-item">子元素1.2</div>
    </div>
  </div>
  <div class="flex-item">子元素2</div>
  <div class="flex-item">子元素3</div>
</div>

.flex-container {
  display: flex;
}
.flex-item {
  flex: 1;
}
.nested-container {
  display: flex;
  flex-direction: column; /* 嵌套的容器也可以使用flex */
}
.nested-item {
  flex: 1;
}

注意，flex布局中的嵌套容器需要单独设置flex属性，以控制它们在父容器中的排列方式。