使用flex和border-box的相等宽度

Question

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

这是一个例子: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是用来改变用来计算默认的CSS框模型width和height元素.

所以会是这样的:

• total width= border+ padding+content width

  和

• total height= border+ padding+content height

但这不会发生在flex-grow,但在flex-basis

这是一个关于flexbox 的好教程

所以你可以用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>

Answer 2

该flex-grow属性不设置弹性项的宽度或高度.它的工作是在flex容器中分配容器中的可用空间.

您已将所有项目设置为flex: 1,这是以下内容的简写:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

这会在项目中平均分配行中的可用空间.

但是边界(和填充)是分开考虑的因素.

flex-grow不关心box-sizing: border-box,因为box-sizing适用于width和height计算,如前所述,不是的功能flex-grow.

相反,使用flex-basis属性(相当于width(在行方向容器中)并且将遵循box-sizing:

flex: 0 0 20%;

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

.container .block {
  height: 28px;
  flex: 0 0 20%; /* adjustment */
  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>