如何在 Flex Column 中将第三列 div 作为一行移动到底部答案

【问题标题】：How to move 3rd column div to bottom as a row in Flex Column如何在 Flex Column 中将第三列 div 作为一行移动到底部
【发布时间】：2021-10-30 04:59:52
【问题描述】：

我想根据图像将第 3 列显示为前 2 列下方的行。有什么选择？

<div class="d-flex">
<section class="flex-even">A</section>
<section class="flex-even">B</section>
<section class="flex-even">C</section>
</div>
 section {
   border:solid 1px red;
 }
.flex-even { flex:1;}

https://jsfiddle.net/anadmin7776/yanouepb/3/

【问题讨论】：

标签： css flexbox

【解决方案1】：

设置环绕并将第三部分设为 100% 宽。

 section {
   border:solid 1px red;
 }
.flex-even { flex:1;}

.d-flex {
display:flex;
flex-wrap:wrap;}

section:nth-child(3) {
flex:0 0 100%;
}

<div class="d-flex">
  <section class="flex-even">A</section>
  <section class="flex-even">B</section>
  <section class="flex-even">C</section>
</div>

【讨论】：

【解决方案2】：

由于你使用bootstrap，注意它有内置类，你可以使用它们来避免编写额外的CSS，自定义类确实可以使用。

在这里找到他们：https://getbootstrap.com/docs/4.5/layout/grid/

代码中的示例

section {
  border: solid 1px red;
}
.flex-even {
/*rules here  if it has any purpose else than flex-grow:1 = class: flex-grow-1 or col */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-wrap m-2">
  <section class="flex-even col">A</section>
  <section class="flex-even col">B</section>
  <section class="flex-even col-12">C</section>
</div>
<ol>
  <li><code>col</code> class will evnly stretch flex-items</li>
  <li><code>col-12</code> class will use the entire row for that flex item</li>
  <li><code>m-X</code> class sets a margin</li>
</ol>

另一个带有边距、填充和自定义类的示例，用于显示单元格周围的排水沟https://jsfiddle.net/4y79nsdj/

【讨论】：