202401102331 -《Flex9格布局——从1到9》

<!-- 6格 -->
<div class="wrap-box wrap-6">
    <div class="flex-inner">
      <div class="flex-box1 flex-item"></div>
      <div class="flex-box2">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
      </div>
    </div>
    <div class="flex-inner">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
</div>

.wrap-box {
  display: -webkit-box;
}
 
.flex-inner {
    -webkit-box-flex: 1;
    display: -webkit-box;
}
 
.flex-item {
    -webkit-box-flex: 1;
    position: relative;
    background-color:red;
}
.wrap-6 {
      -webkit-box-orient: horizontal;
}
.wrap-6 .flex-inner {
      -webkit-box-flex: 0;
      -webkit-box-orient: vertical;
}
.wrap-6 .flex-inner:first-child {
      width: 66.6%;
}
.wrap-6 .flex-inner:last-child {
      width: 33.3%;
}
.wrap-6 .flex-item {
      padding-top: 100%;
}
.wrap-6 .flex-box2 .flex-item {
      padding-top: 50%;
}
.wrap-6 .flex-box2 {
      display: -webkit-box;
      -webkit-box-orient: horizontal;
}
.wrap-6 .flex-inner:first-child,
.wrap-6 .flex-box2 .flex-item:first-child {
      margin-right: 1px;
}
.wrap-6 .flex-box1,
.wrap-6 .flex-inner:last-child .flex-item:first-child,
.wrap-6 .flex-inner:last-child .flex-item:nth-child(2) {
      margin-bottom: 1px;
}

<!-- 1格 -->
<div class="wrap-1">
  <div class="flex-inner">
    <div class="flex-item"></div>
  </div>
</div>



.wrap-1 .flex-inner {
  width: 100%;
}

.wrap-1 .flex-item {
  padding-top: 100%;
  background-color:red;
}