html - 对齐多个 Flexbox 行的列

Question

我使用 Flexbox 作为网格列

在第一行，我有三个 dr-col-1 和两个 dr-col-2 (总共 7 个 flex-grow步骤)。

在第二行，我有全部七个 dr-col-1。

当我渲染它时，我注意到对齐不精确:

如何精确对齐两行中的列？

.dr-row {
  display: flex;
}
.dr-col-1 {
  flex-grow: 1;
  flex-basis: 0;
  border: 1px solid black;
}

.dr-col-2 {
  flex-grow: 2;
  flex-basis: 0;
  border: 1px solid black;
}

<div class="dr-row">
    <div class="dr-col-2">
      one
    </div>

    <div class="dr-col-1">
      two
    </div>

    <div class="dr-col-1">
      three
    </div>

    <div class="dr-col-1">
      four
    </div>

    <div class="dr-col-2">
      five
    </div>
  </div>

<div class="dr-row">
    <div class="dr-col-1">
      one
    </div>

    <div class="dr-col-1">
      two
    </div>

    <div class="dr-col-1">
      three
    </div>

    <div class="dr-col-1">
      four
    </div>

    <div class="dr-col-1">
      five
    </div>
    <div class="dr-col-1">
      six
    </div>
    <div class="dr-col-1">
      seven
    </div>
  </div>

<强> Codepen

Answer 1

flex-grow 属性旨在分配容器中的可用空间。它不是为 Flex 元素的特定尺寸而设计的(即 flex-basis)。

列未对齐，因为第二行中有更多垂直边框。

更具体地说，第一行的边框宽度为 8px，第二行的边框宽度为 12px(不包括边缘)。

这意味着第一行中有更多可用空间，从而导致未对齐。

不要使用flex-grow，而是尝试使用flex-basis:

.dr-row {
  display: flex;
}
.dr-col-1 {
  flex: 0 0 14.29%;
  border: 1px solid black;
  box-sizing: border-box;
}

.dr-col-2 {
  flex: 0 0 28.58%;
  border: 1px solid black;
  box-sizing: border-box;
}
body { margin: 0; }

<div class="dr-row">
    <div class="dr-col-2">one</div>
    <div class="dr-col-1">two</div>
    <div class="dr-col-1">three</div>
    <div class="dr-col-1">four</div>
    <div class="dr-col-2">five</div>
  </div>

<div class="dr-row">
    <div class="dr-col-1">one</div>
    <div class="dr-col-1">two</div>
    <div class="dr-col-1">three</div>
    <div class="dr-col-1">four</div>
    <div class="dr-col-1">five</div>
    <div class="dr-col-1">six</div>
    <div class="dr-col-1">seven</div>
  </div>

revised codepen

有关更多信息，请参阅: flex-grow not sizing flex items as expected