Flex项目不考虑边距和框大小:边框

Question

我试图在标准CSS中实现一个简单的事情.

假设我有一个有3列和3列的网格系统box-sizing: border-box.

这意味着我将适合3个盒子,并且边距会缩小尺寸以适应最多3个盒子.

但是当我尝试用FLEXBOX做到这一点时,这真是一种痛苦!

因此,如果我有div,flex: 1 1 33.33%; margin: 10px;我希望每行有3个盒子......但是如果我使用的话flex-wrap: wrap,那将不会缩小到适合3个盒子.

这是一个例子..这个想法是第二行连续有3个盒子,第四个盒子在最后一行.

谢谢

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>

Answer 1

请记住,box-sizing: border-box将填充和边框带入宽度/高度计算,但不是边距.边距总是单独计算.

该box-sizing属性有两个值:

• content-box
• border-box

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

在引用CSS Box模型时请考虑这些术语.

^来源:W3C

3.1.更改框模型:box-sizing 属性

content-box

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

border-box

此元素的宽度和高度的长度和百分比值确定元素的边框.也就是说,元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制.通过从指定的宽度和高度属性中减去各边的边框和填充宽度来计算内容宽度和高度.

此外,Flex容器的初始设置是flex-shrink: 1.这意味着flex项目可以缩小以适合容器.

因此,规定width,height或flex-basis将不会持有,除非flex-shrink被禁用.

您可以使用覆盖默认值flex-shrink: 0.

这里有一个更完整的解释:flex-basis和width之间有什么区别？

这是一个简单的解决方案:

你有四个盒子.你想在第1行有3个,在第2行有第3个.

这就是你拥有的:

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

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