html - 我怎样才能让这个布局像它应该的那样对齐？

Question

我正在尝试通过创建自己的布局来学习和练习 flexbox。我不完全确定为什么底行的 col-1-of-2 不会与第二行中正确的 col-1-of-2 对齐。与 col-1-of-4 相同。

grid-box 是否更好，因为您可以更好地控制列间隙？我试着让父边距 5px 和子边距 5px 并且它很接近但仍然没有 100% 对齐。我假设我们也必须考虑屏幕尺寸？

.row {
  display: flex;
}

.col {
  display: flex;
  flex-grow: 1;
  border: 1px solid purple;
  margin: 1rem;
}

.col-1-of-1 {
  width: 100%;
  justify-content: center;
  background: lightblue;
}

.col-1-of-2 {
  width: 50%;
  justify-content: center;
  background: orange;
}

.col-1-of-3 {
  width: 33%;
  justify-content: center;
  background: lightgreen;
}

.col-1-of-4 {
  width: 25%;
  justify-content: center;
  background: lightcoral;
}

<div class="row">
  <div class="col col-1-of-1">
    <p>col-1-of-1</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
</div>


<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

Answer 1

Is grid-box better for this because you have more control of the column gap?

您即将了解此陈述中问题的性质。问题是你正在使用一个布局引擎，它的目标是允许元素增加和缩小它们的大小和它们之间的空间以获得有机的配合，并期望它表现得像一个刚性的、类似网格的系统。

具体来说，问题出现在您添加 margin 时至 .col元素。对于任何给定的行，您都试图将内容放入 100% width , 但内容 width加起来是100% 加什么margin已包含的元素数。

例如——顶行是100%加上 2rem (margin 在两侧)。下一行是 50% 的两个元素宽度，增加了 100% , 再加上 4rem为 1rem 添加margin s 在两个元素的两侧。

flex会为您解决这个问题——它会按摩尺寸和缝隙，以使所有东西都适合并干净利落地 100%宽空间。但是，当您开始混合 .col-1-of-<num> 时，事情会变得很棘手。类型并期望它们很好地排列-- flex正在努力确保它们适合，这是以让它们对齐为代价的。

就是说，使用 flex 可以实现您想要的。下面的解决方案仅使用 calc() 确保 margin设置 width 时会考虑 s元素的——而不是 .col-1-of-1正在100% , 它是 calc(100% - 2em) , .col-1-of-2变成 calc(50% - 2em) , 等等。

可能还有其他方法可以使用 flex 来解决这个问题，也可以通过使用 flex 来实现。属性(property)，或 justify-content 属性(property);或者你可以查看 grid .祝你好运!

---

.row {
  display: flex;
}

.col {
  display: flex;
  flex-grow: 1;
  border: 1px solid purple;
  margin: 1rem;
}

.col-1-of-1 {
  width: calc(100% - 2rem);
  justify-content: center;
  background: lightblue;
}

.col-1-of-2 {
  width: calc(50% - 2rem);
  justify-content: center;
  background: orange;
}

.col-1-of-3 {
  width: calc(33% - 2rem);
  justify-content: center;
  background: lightgreen;
}

.col-1-of-4 {
  width: calc(25% - 2rem);
  justify-content: center;
  background: lightcoral;
}

<div class="row">
  <div class="col col-1-of-1">
    <p>col-1-of-1</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
</div>


<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>