html - 使用 flex 和 border-box 等宽

Question

我在 flexbox 中使用 box-sizing: border-box; 具有不同的 border 厚度。我希望 flexbox 中的元素具有相等的宽度，但它会计算没有边框的元素的 width。

举个例子:我容器的宽度是100px，所以每个元素应该是20px；但是它们是 19.2px (x4) 和 23.2px。

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

Answer 1

box-sizing: border-box 用于更改用于计算元素的 width 和 height 的默认 CSS 框模型.

所以会像这样:

• 总宽度 = 边框 + 填充 + 内容宽度

  和

• 总高度 = border + padding + content height

但这不会发生在 flex-grow 中，而是发生在 flex-basis

这是一个很好的tutorial关于 flex 盒子

---

所以你可以用flex:0 20%代替flex:1,

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 20%;
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

注意:如果你有超过 5 个元素，那么你可以像这样使用 calc() flex: 0 calc(100%/8) 其中 8 是您将拥有的元素的数量

包含更多元素的片段

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 calc(100%/8);
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
  <span class="block">5</span>
  <span class="block">6</span>
  <span class="block">7</span>
</div>