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;
}

 

<!-- 7格 -->
<!-- HTML -->
 <div class="wrap-box wrap-7">

            <div class="flex-inner flex-box1">
                <div class="flex-item"></div>
                <div class="flex-item"></div>
                <div class="flex-item"></div>
                <div class="flex-item"></div>
            </div>

            <div class="flex-inner flex-box2">
                <div class="flex-item"></div>
                <div class="flex-item"></div>
                <div class="flex-item"></div>
            </div>

        </div>

<!-- CSS -->
.wrap-box {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 1px;
            }
            .flex-inner {
                width: 100%;
                display: flex;
                gap: 1px;
                flex-wrap: wrap;   /* 能自由換行！！ */
            .flex-box2 {
                justify-content: space-between;
            }

            .flex-item {
                flex: 1;
                background: red;
            }

            /* 田字格分別佔據wrap-box的 1/2 */
            .wrap-7 .flex-box1 .flex-item {
                aspect-ratio: 1 / 1; 
                flex-basis: calc(50% - .5px); /* 留1px的間隔 */
            }

            /* 單行三個正方形分別佔據wrap-box的 1/3 */
            .wrap-7 .flex-box2 .flex-item {
                aspect-ratio: 1 / 1; /* 正方形 */
                flex-basis: calc(33.33333% - 0.66667px); /* 留1px的間隔 */
            }

            .flex-item:before {
                content: "";
                float: left;
                padding-top: 100%; /* 實現1:1的比率，產生正方形的效果 */
            }  
     
            .flex-box1 {
                justify-content: space-between;
            }