甚至可以使用边框大小的边框来包装柔性物品 [英] Flex items wrapping even with box-sizing border-box

问题描述

在下面的代码中，当我添加填充时，由于我使用的是border-box，它应该增加宽度.但是为什么不行呢?谁能帮我.

如果我添加一些边距或填充我的child__wrapper被推到新行，为什么?

 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%;
}

.child__wrapper {
  height: 300px;
  flex: 0 0 33.3%;
  margin: 10px;
  box-sizing: border-box;
  background: rebeccapurple;
} 

 <div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div> 

解决方案

请记住，box-sizing: border-box在宽度/高度计算中引入了填充和边框，但没有引入边距.保证金总是分开计算的.

box-sizing 属性采用两个值:

• content-box
• border-box

它不提供padding-box或margin-box.

在引用 CSS盒子模型时，请考虑这些术语.. >

^{来源: W3C}

因此，当您将商品宽度设置为33.3％并在左右增加10px的边距时，就会触发溢出条件，从而导致第三项商品包装.

33.3% + 33.3% + 33.3% + 10px + 10px + 10px + 10px + 10px + 10px > 100%

相反，请尝试以下项目:

flex: 1 0 26%

此速记规则细分为:

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

使用flex-grow: 1，无需flex-basis达到33.3％.

由于flex-grow将占用该行中的可用空间，因此flex-basis仅需要足够大即可实施换行.

在这种情况下，对于flex-basis: 26%，该行上最多可以存在三个项目，留有足够的空白空间，并且flex-grow可以填补所有空白.

 .wrapper {
  display: flex;
  flex-wrap: wrap;
}

.child__wrapper {
  flex: 1 0 26%;
  margin: 10px;
  height: 300px;
  box-sizing: border-box;
  background: rebeccapurple;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} 

 <div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div> 

In my code below, when I add padding it should add to width since I am using border-box. But it is not working why? Can anyone help me.

If I add some margin or padding my child__wrapper is pushed into new line why?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%;
}

.child__wrapper {
  height: 300px;
  flex: 0 0 33.3%;
  margin: 10px;
  box-sizing: border-box;
  background: rebeccapurple;
}

<div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div>

解决方案

Keep in mind that box-sizing: border-box brings padding and borders into the width / height calculation, but not margins. Margins are always calculated separately.

The box-sizing property takes two values:

• content-box
• border-box

It does not offer padding-box or margin-box.

Consider those terms when referring to the CSS Box Model.

^{source: W3C}

So when you set your item widths to 33.3% and add 10px margins on the right and left, an overflow condition is triggered, resulting in a wrap of the third item.

33.3% + 33.3% + 33.3% + 10px + 10px + 10px + 10px + 10px + 10px > 100%

Instead, try this on the items:

flex: 1 0 26%

This shorthand rule breaks down to this:

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

With flex-grow: 1 there's no need for flex-basis to be 33.3%.

Since flex-grow will consume free space in the row, flex-basis only needs to be large enough to enforce a wrap.

In this case, with flex-basis: 26%, a maximum of three items can exist on the line, there's plenty of space left for margins, and flex-grow fills any gaps.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.child__wrapper {
  flex: 1 0 26%;
  margin: 10px;
  height: 300px;
  box-sizing: border-box;
  background: rebeccapurple;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div>

这篇关于甚至可以使用边框大小的边框来包装柔性物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！