如何使用 Flexbox 创建多列和多行 [重复]答案

【问题标题】：How to create multiple columns and row with Flexbox [duplicate]如何使用 Flexbox 创建多列和多行 [重复]
【发布时间】：2020-04-07 18:48:11
【问题描述】：

鉴于我有以下标记：

<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 在中间。

【问题讨论】：

标签： html css flexbox grid

【解决方案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/

【讨论】：

谢谢，让它看起来很简单。我如何轻松调整列宽，A = 20%，D 说 15%，然后 B 和 C 剩下的？？？
@John 我更新了 sn-ps。您还可以阅读链接，您会找到有关此内容的所有信息以及我是如何做到的；) 列 CSS：codepen.io/gc-nomade/pen/PowGOgb 将使每一列的大小相同...我认为最好的选择是此处的网格显示。跨度>
显然我们还“不允许”使用 css 网格。但我会看看 flexbox 选项，再次感谢您的帮助:-)