弹性项目不尊重边距和框尺寸：边框 [英] Flex items not respecting margins and box-sizing: border-box

问题描述

假设我有一个有3列和<$ c $的网格系统c> box-sizing：border-box 。

这意味着我会装3个盒子，最多3盒。

但是当我试图用FLEXBOX做这件事时，所以如果我div的 flex：1 1 33.33％;保证金：10px; 我期待每行3箱...但如果我使用 flex-wrap：wrap ，那不会收缩以适应3盒。

下面是一个例子..这个想法是，第二行将连续3盒，第四盒将在最后一行。

谢谢

^{来源： W3C}

3.1。改变方框模型：方框尺寸
属性

content-box

指定的宽度和高度分别适用于宽度和高度元素的内容框的
。
元素的填充和边框布局并绘制在指定的宽度和高度之外。

边框

此元素的宽度和高度的长度和百分比值
确定元素的边框。也就是说，在元素上指定的任何填充或
边框都被放置在这个
指定的宽度和高度内。内容的宽度和高度是
，通过从指定的宽度和高度属性中减去
各边的边框和填充宽度来计算。

---

此外，flex容器的初始设置是 flex-shrink：1 。这意味着flex项目可以缩小以适应容器。

因此，一个指定的宽度， height 或 flex-basis 将不会成立，除非 flex-shrink 已禁用。

您可以使用 flex-shrink：0 来覆盖默认值。

下面是一个更完整的解释：弹性基础和宽度有什么区别？

---

下面是一个简单的解决方案：你有四个盒子你需要三个第一行和最后一个第二行。

这是你有什么：

  flex：1 1 33.33％; 
 margin：10px; 
  

这个分解为：

• flex-grow：1


• flex-shrink：1 $ flex-basis：33.33％



我们知道 box-sizing：border-box 因子填充和边界到 flex-basis 。这不是问题。但是，利润率呢？

因为每件商品都有 flex-grow：1 不需要 flex-basis 为33.33％。由于 flex-grow 会消耗行中的任何空闲空间， flex-basis

既然页边空白也会占用空间， flex-grow 不会侵入保证金空间。

所以试试这个：

  flex：1 1 26％; 
 margin：10px; 
  

  * {box-sizing：border-box;}。horizo​​ntal-layout {display：flex; width：400px;} header> span {flex：1 0 26％; / * ADJUSTED * / margin：10px;} header＃with-border-padding {flex-wrap：wrap;} header＃with-border-padding> span {flex：1 0 26％; / * ADJUSTED * /} header＃with-border-padding> .button {border：1px solid black; padding-left：5px;} header> .button {background-color：grey;} header> .app-name {background-color：orange;}  

  NO flex-wrap：wrap，所以不会考虑flex 33％< br />< header class =horizo​​ntal-布局> < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span> < span class =button> D< / span>< / header>< br />< br /> WITH flex-wrap：wrap：我希望在第一行有3个盒子，在下面有D盒子< header id =with-border-paddingclass =horizo​​ntal-layout> < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span> < span class =button> D< / span>< / header>  

I'm trying to achieve a simple thing that we have in standard CSS.

Let's say that I have a grid system with 3 columns and box-sizing: border-box.

That means that I will fit 3 boxes and with a margin that will shrink the size to fit max 3 boxes.

But when I try to do that with FLEXBOX, it's a pain!!

So if I have div's with flex: 1 1 33.33%; margin: 10px; I was expecting to have 3 boxes per row... but if I use flex-wrap: wrap, that will not shrink to fit 3 boxes .

Here is a example.. the idea is that the second row would have 3 boxes in a row and fourth box would be in the last row.

Thanks

https://jsfiddle.net/mariohmol/pbkzj984/14/

.horizontal-layout {
  display: flex;
  flex-direction: row;
  width: 400px;
}

header>span {
  /* flex: 1 1 100%; */
  /* flex: 1 0 100%; */
  flex: 1 1 33.33%;
  margin: 10px;
}

header>.button {
  background-color: grey;
}

header>.app-name {
  background-color: orange;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 1 33.33%;
  box-sizing: border-box;
  /* this is not useful at all */
}

header#with-border-padding>.button {
  border: 1px solid black;
  padding-left: 5px;
}

NO flex-wrap: wrap, so it not respects the flex 33% <br/>
<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
  <span class="button">D</span>
</header>
<br/><br/> WITH flex-wrap: wrap : I expect to have 3 boxes in first row and D box in a down<br/>
<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
  <span class="button">D</span>
</header>

解决方案

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}

3.1. Changing the Box Model: the box-sizing property

content-box

The specified width and height apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.

border-box

Length and percentages values for width and height on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties.

---

Also, an initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to fit within the container.

Therefore, a specified width, height or flex-basis will not hold, unless flex-shrink is disabled.

You can override the default with flex-shrink: 0.

Here's a more complete explanation: What are the differences between flex-basis and width?

---

Here's a simple solution:

You have four boxes. You want three on row 1 and the last on row 2.

This is what you have:

flex: 1 1 33.33%;
margin: 10px;

This breaks down to:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 33.33%

We know that box-sizing: border-box factors padding and borders into the flex-basis. That's not a problem. But what about the margins?

Well, since you have flex-grow: 1 on each item, there is no need for flex-basis to be 33.33%.

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

Since margins also consume free space, flex-grow will not intrude into the margin space.

So try this instead:

flex: 1 1 26%;
margin: 10px;

* {
  box-sizing: border-box;
}

.horizontal-layout {
  display: flex;
  width: 400px;
}

header > span { 
  flex: 1 0 26%;                    /* ADJUSTED */
  margin: 10px;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}

header#with-border-padding>.button {
  border: 1px solid black;
  padding-left: 5px;
}

header>.button {
  background-color: grey;
}

header>.app-name {
  background-color: orange;
}

NO flex-wrap: wrap, so it not respects the flex 33% <br/>
<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
  <span class="button">D</span>
</header>
<br/><br/> WITH flex-wrap: wrap : I expect to have 3 boxes in first row and D box in a down<br/>
<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
  <span class="button">D</span>
</header>

这篇关于弹性项目不尊重边距和框尺寸：边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！