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

Posted 2023-03-05

【中文标题】如何使用 Flexbox 创建多列和多行 [重复]

【英文标题】：How to create multiple columns and row with Flexbox [duplicate]

【发布时间】：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 在中间。

【参考方案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%;
.Dwidth: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 选项，再次感谢您的帮助:-)