等宽使用柔性和边框 [英] Equal width using flex and border-box

问题描述

我正在使用 box-sizing：border-box; 在flexbox中改变 border 厚度。我希望flexbox中的元素具有相同的宽度，但它会计算不带边框元素的元素宽度。

<这里是一个例子：我的容器的 width 是 100px ，所以每个元素应该是 20像素;但是它们是 19.2px （x4）和 23.2px 。

< pre class =snippet-code-css lang-css prettyprint-override> .container {display：flex; flex-direction：row; align-items：center; width：100px;}。container .block {height：28px; flex：1;边框：1px纯黑色; 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>  

box-sizing：border-box 用于更改用于计算的默认CSS框模型宽度和高度元素。

如下：

• 总宽度 = border + padding + content width

  
  
  

  和




• 总高度 = border + padding + content height

>



但是在 flex-grow 中没有发生，但是在 flex-basis





这是一个很好的 教程 关于flexbox b
$ b 可以使用 flex：0 20％而不是 flex：1 ，



.container {display：flex; flex-direction：row; align-items：center; width：100px;}。container .block {height：28px; flex：0 20％;边框：1px纯黑色; 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（） c> 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）;边框：1px纯黑色; 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>  

I am using box-sizing: border-box; with varying border thicknesses within a flexbox. I want the elements within the flexbox to have equal widths, but it calculates the width of the element without the borders.

Here is an example: the width of my container is 100px, so each element should be 20px; however they are 19.2px (x4) and 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>

解决方案

The box-sizing: border-box is used to change the default CSS box model used to calculate width and height of the elements.

So would be like this:

• total width = border + padding + content width

  and

• total height = border + padding + content height

But that doesn't happen in flex-grow, but in flex-basis

Here is a good tutorial about flexbox

---

So you can use flex:0 20% instead of 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>

Note: if you have more elements than 5, then you can use calc() like this flex: 0 calc(100%/8) where 8 is the # of elements you will have

Snippet with more elements

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

这篇关于等宽使用柔性和边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！