如何使用Flexbox创建多个列和行

Question

鉴于我有以下标记：

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

如何使用Flexbox获得以下布局？

我用我尝试过的方法创建了一支笔，但是它不起作用：

https://codepen.io/pbul2004/pen/LYEROLq

• A = 25％的图像
• B =标题和子标题为50％
• C = 50％的描述
• D =皮尔斯和25％的按钮

B和C在彼此的中间。

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/