如何将列与 Flexbox 对齐？

Question

我目前正在学习 Flexbox 布局，但找不到解决我的问题的方法。

我尝试使用 justify-content 和 flex-basis 但它不起作用。有人有解决办法吗？

我想要的结果：

section {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

.column {
  width: 100%;
  background-color: #e2e2e2;
  padding: 1%;
  margin: 1%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

}

#first {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 0;
}

<section>
  <div class="column" id="first">First</div>
  <div class="column" id="second">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

https://jsfiddle.net/qdsbacvn/

Answer 1

这是 CSS 网格的完美用例，您不需要大量复杂的代码：

section {
  display: grid;
  margin: 2% auto;
  grid-gap:2%;
  grid-template-columns:repeat(4,1fr);
}

.column {
  background-color: #e2e2e2;
  padding: 5px;
}

#first {
  grid-column:span 2;
}

<section>
  <div class="column" id="first">First</div>
  <div class="column" id="second">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

使用 Flexbox，您可以尝试以下操作：

section {
  display: flex;
}

.column {
  background-color: #e2e2e2;
  padding: 1%;
  margin: 1%;
  flex-grow: 1;
  flex-basis: 0;
}

#first {
  flex-grow: 2;
  flex-basis:4%; /*2 x (padding + margin)*/
}

<section>
  <div class="column" id="first">First</div>
  <div class="column" id="second">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

flex-basis:0由于在计算可用空间之前仅考虑您使用的填充/边距。诀窍是确保我们在两种情况下都有相同的可用空间，因此我们向flex-basis大元素添加第一种情况下不存在的边距/填充。