[分享]css中flex可以包含flex

CSS中的Flex布局在实现常规页面布局时已经变得越来越普遍，但是你知道Flex布局中一个Flex容器也可以包含其他Flex容器吗？这种Flex包含Flex的布局，可以帮助你很好的优化页面的结构与样式...

CSS中的Flex布局在实现常规页面布局时已经变得越来越普遍，但是你知道Flex布局中一个Flex容器也可以包含其他Flex容器吗？这种Flex包含Flex的布局，可以帮助你很好的优化页面的结构与样式。

要让一个Flex容器包含其他Flex容器，很简单，只需要在被包含Flex容器设置display属性为flex即可。同时，你还可以在被包含Flex容器的样式中定义多列布局，以更好的分离和显示内容。以下是一段包含两个Flex的HTML代码样例：

<div class="container">
  <div class="flex-item">
    <div class="sub-flex-container">
      <div class="sub-flex-item">1.1</div>
      <div class="sub-flex-item">1.2</div>
      <div class="sub-flex-item">1.3</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="sub-flex-container">
      <div class="sub-flex-item">2.1</div>
      <div class="sub-flex-item">2.2</div>
    </div>
  </div>
</div> 

在上面的代码样例中，我们使用了一个名为"container"的Flex容器来包含两个子容器"flex-item"。子容器各自设置了"sub-flex-container"类和"sub-flex-item"类，用来展示包含和子项元素的样式。接下来是CSS样式：

.container {
  display: flex;
}
.flex-item {
  flex: 1;
  margin-right: 20px;
}
.sub-flex-container {
  display: flex;
  flex-direction: column;
}
.sub-flex-item {
  flex: 1;
  margin-bottom: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
} 

在CSS中，我们首先在"container"类中定义了display：flex，使容器变为Flex容器，接着，我们在"flex-item"类中，设置了flex：1（通过flex属性可以设置Flex容器中每个子项的宽度占比），以便让每个子容器等分Flex容器的宽度，并设定margin-right为20px。然后，我们在"sub-flex-container"类中定义了子容器的布局为column，即为垂直方向排列，子项为每行一个。在最后一步中，我们通过"sub-flex-item"类设置各个子项单独的样式，包括宽高，背景，边框，以及内边距。通过这些样式，我们成功的让一个Flex容器包含了多个子的Flex容器达到了优化页面布局与样式的目的。