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

 

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


            .wrap-2 {
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 100%;
            }

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

            .flex-item {
                width: calc(50% - 0.5px);
                height: 100%;
                aspect-ratio: 1 / 1;
                background-color: red;
            }

            .flex-item:nth-child(2) {
                margin-left: 1px;
            }

 

<!-- 3格 -->
<div class="wrap-box wrap-3">
    <div class="flex-item flex-item-large"></div>
    <div class="flex-container">
        <div class="flex-item flex-item-small"></div>
        <div class="flex-item flex-item-small"></div>
    </div>
</div>


.wrap-3{
    display: flex;
    gap: 1px;
}

.flex-item{
  background:pink;
}


.flex-item-large {
    flex: 2;
    padding-top: 100%;
}

.flex-container {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.flex-item-small {
    flex: 1;
    padding-top: 50%;
}

<!-- 四格 -->
<div class="wrap-box wrap-4">
    <div class="flex-item flex-item-large"></div>
    <div class="flex-container">
        <div class="flex-item flex-item-small"></div>
        <div class="flex-item flex-item-small"></div>
        <div class="flex-item flex-item-small"></div>
    </div>
</div>

.wrap-4 {
    display: flex;
    gap: 1px;
}

.flex-item{
  background:red;
}

.flex-item-large {
    flex: 2;
    padding-top: 100%;
}

.flex-container {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.flex-item-small {
    flex: 1;
    padding-top: 33.33%;
}

<!-- 9格 -->
<div class="wrap-box wrap-9">
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
</div>

.wrap-9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
}

.flex-item-small {
    padding-top: 100%;
}


.flex-item{
  background:red;
}

<!-- 5格 -->
<div class="wrap-5">
  <div class="flex-container">
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
  </div>
  <div class="flex-container">
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
    <div class="flex-item flex-item-small"></div>
  </div>
</div>

.wrap-5 {
  display: flex;
  gap: 1px;
  width: 100vw;
  height: 100vw;
}

.flex-container {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.flex-item {
  background: red;
  flex: 1;
  padding-top: 50%;
}

.flex-container:first-child .flex-item {
  padding-top: 100%;
}

<!-- 8格 -->
<div class="wrap-8">
  <div class="top-row">
    <div></div>
    <div></div>
  </div>
  <div class="bottom-row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

.wrap-8 {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 70vw;
  gap: 1px;
}

.top-row {
  flex: 0 0 40%;
  display: flex;
  gap: 1px;
}

.top-row > div {
  flex: 1;
  background-color: red;
  padding-top: 50%;
}

.bottom-row {
  flex: 0 0 60%;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}

.bottom-row > div {
  flex: 0 0 calc(33.33% - 0.67px);
  background-color: red;
  padding-top: calc(33.33% - 0.67px);
}