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

问题描述

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

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

.container {显示:弹性；弹性方向:行；对齐项目:居中；宽度:100px；}.container .block {高度:28px；弹性:1；边框:1px纯黑色；box-sizing: 边框框；}.container .block.selected {边框:3px纯蓝色；}

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

解决方案

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

应该是这样的:

• 总宽度 = border + padding + 内容宽度

  和

• 总高度 = border + padding + 内容高度

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

这是一个很好的教程 关于 flexbox

<小时>

所以你可以使用 flex:0 20% 而不是 flex:1，

.container {显示:弹性；弹性方向:行；对齐项目:居中；宽度:100px；}.container .block {高度:28px；弹性:0 20%；边框:1px纯黑色；box-sizing: 边框框；}.container .block.selected {边框:3px纯蓝色；}

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

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

包含更多元素的片段

.container {显示:弹性；弹性方向:行；对齐项目:居中；宽度:100px；}.container .block {高度:28px；弹性:0 计算(100%/8)；边框:1px纯黑色；box-sizing: 边框框；}.container .block.selected {边框:3px纯蓝色；}

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

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>

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