Flexbox项宽度受填充的影响
请参阅http://jsfiddle.net/56qwuz6o/3/
<div style="display:flex">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>
div div {
flex: 1 1 0;
border:1px solid black;
box-sizing: border-box;
}
#a {
padding-right: 50px;
}当我在flex项(#a)上设置了填充时，它的宽度(在border-box意义上)会受到影响。如何使其计算出的宽度忽略填充？即。我希望我的每个盒子占据文档宽度的33%。
编辑：感谢到目前为止的答案。但在现实中，我实际上在一行中有更多具有固定宽度的框：在http://jsfiddle.net/56qwuz6o/7/，我希望#a、#b和#c都有相同的宽度。
<div style="display:flex; width: 400px">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</div>
div div {
flex: 1 1 33%;
border:1px solid black;
box-sizing: border-box;
}
#a {
padding-right: 100px;
}
#d {
flex-basis: 200px;
width: 200px;
}回答 4
Stack Overflow用户
发布于 2015-08-19 23:29:50
您有一个选择是设置flex-basis: 33.33%或一个与您拥有的子代数量相关的数字。我不确定是否有一种动态的方法。
Stack Overflow用户
发布于 2015-08-19 23:30:51
一个适当的‘`flex:声明’似乎是有效的。
div div {
flex: 0 0 33%;
/* don't grow, don't shrink, be 33% wide */
/* flex:1 0 33% works too */
border: 1px solid black;
box-sizing: border-box;
}
#a {
padding-right: 100px;
}<div style="display:flex">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>
Stack Overflow用户
发布于 2018-06-15 19:16:57
作为对这个问题的更广泛的回答:所有的padding，border，margin似乎都是可用总宽度的固定推导，在剩余空间在flex-box中被划分之前。因此，具有更多填充的框实际上将获得更多空间。最好的演示是使用两个相互下方的弯曲部分，其中一个带有双柱：
(表格应该是这样。↓下面的坏东西应用程序)
section
display: flex
width: 90%
div
flex: 1 1 100%
background: #aca
// good to illustrate boundaries, since it has no width effect…
box-shadow: inset 0 2px 6px rgba(black, .4)
.double
flex: 2 1 200%笔记
作为flex-basis (第三个flex:参数)的auto是不好的，因为它会查看实际内容。你不会因为内容的数量而改变布局。(比较：table-layout: auto)。使用100%。(即使总数加起来达到了几百%。)
以下所有操作都会破坏上面的网格对齐方式：
border: 8px solid orange
padding-left: 8px
margin-left: 8px不，box-sizing的两个值都不会对此有所帮助。
→在给定的网格中填充弹性框的最好方法是内部标记(即具有全宽和填充的标记)。
https://stackoverflow.com/questions/32099624
复制相似问题