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用于更改用于计算元素width和height的默认CSS框模型。

所以会是这样的：

total width = border + padding + content width

和
total height = border + padding + content height

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

中

这是关于flexbox的好tutorial

因此，您可以使用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: 1，这是以下内容的简写：

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

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

BUT 边框（和填充）分别考虑在内。

flex-grow并不关心box-sizing: border-box，因为box-sizing适用于width和height计算，如前所述，这些计算不是函数flex-grow。

相反，使用flex-basis属性，该属性相当于width（在行方向容器中），并且会尊重box-sizing：

flex: 0 0 20%;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您可以将flex-basis设置为20％，然后将宽度平均分配，而不是将flex设置为1;

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex-basis: 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>

Answer 4

一种方法是将2px填充设置为.block并将其移除.selected

＆＃13;

.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;
  padding: 2px;
}

.container .block.selected {
  border: 3px solid blue;
  padding: 0px;
}

＆＃13;

<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>

＆＃13;

Answer 5

您的问题在flex: 1;，即使是更多/更少的元素，也会将其更改为flex: 1 0 20%;。无需像其他人提到的那样使用calc来计算宽度。

也只是改变这个：

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

为：

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

DEMO： https://jsfiddle.net/4aww81wv/

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

5 个答案: