html - 如何使用 Flexbox 创建多列和多行

Question

<分区>

Answer 1

你需要一个设置高度来将 flex 元素包裹到列中:

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.box {
  display: flex;
  height: 100vh;
  flex-flow: column wrap;
}

.list-item {
  flex: 1;
  border: red solid;
 /* width: 33.33%;*/
}

.A,
.D {
  min-height: 100%;
}
.A {width:20%;}
.D{width:15%;}
.B,.C {width:65%}

<ul class="box">
  <li class="list-item A">
    <a>A</a>
  </li>
  <li class="list-item B">
    <a>B</a>
  </li>
  <li class="list-item C">
    <a>C</a>
  </li>
  <li class="list-item D">
    <a>D</a>
  </li>
</ul>

如果您无法设置高度，则网格会为您完成这项工作。

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.box {
  display: grid;
  grid-template-columns: 20% 1fr 15%;
  flex-flow: column wrap;
  
  /* for demo */
  min-height: 50vh;
  transition:0.2s;
  /* for demo, use content instead */
}
.box:hover {min-height:100vh;}

.list-item {
  border: red solid;
}

.A,
.D {
  grid-row: 1 / span 2;
}

.A {
  grid-column: 1;
}

.B {
  grid-row: 1;
  grid-column: 2;
}

.C {
  grid-column: 2;
  grid-row: 2
}

.D {
  grid-column: 3:
}

<ul class="box">
  <li class="list-item A">
    <a>A</a>
  </li>
  <li class="list-item B">
    <a>B</a>
  </li>
  <li class="list-item C">
    <a>C</a>
  </li>
  <li class="list-item D">
    <a>D</a>
  </li>
</ul>

作为教程或提醒:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ & https://css-tricks.com/snippets/css/complete-guide-grid/