CSS 在弹性项目上使用边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32765039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using margin on flex items
提问by Luke Twomey
I was under the impression that a margin can be added to flex items/children, and flexbox should automatically take that into account and calculate the correct spacing between the items.
我的印象是可以为 flex 项目/子项添加边距，并且 flexbox 应该自动考虑到这一点并计算项目之间的正确间距。
I can't seem to get this working as I would like though.
不过，我似乎无法按照自己的意愿进行工作。
Fiddle here: https://jsfiddle.net/dba5ehcw/1/
在这里小提琴：https: //jsfiddle.net/dba5ehcw/1/
.flex-item{
border: 1px solid blue;
box-sizing: border-box;
height: 160px;
width: 50%;
}
So each flex item at the moment is half the width of the container, and they flow nicely next to each other.
所以现在每个 flex 项目都是容器宽度的一半，并且它们彼此相邻地流动。
I would like to be able to add a margin of say, 1em to the flex-items in order to give them some breathing room, but in doing so, they become larger than the 50% and no longer stack next to each other on the same line because they are too wide.
我希望能够在 flex-items 上添加 1em 的边距，以便给它们一些喘息的空间，但这样做时，它们变得大于 50% 并且不再彼此堆叠在同一条线，因为它们太宽了。
Is there a way to use margin on the flex-items and have the flexbox container take this into account and adjust (decrease) their widths accordingly?
有没有办法在 flex-items 上使用边距并让 flexbox 容器考虑到这一点并相应地调整（减少）它们的宽度？
回答by Adam
You need to do it with padding - which, when in border-boxmode does not make the container larger than it's specified width - not margin, and a nested flexdiv. This is how all flexbox-based grid systems work. Code below:
您需要使用填充来完成它 - 在border-box模式下不会使容器大于指定的宽度 - 不是边距和嵌套的flexdiv。这就是所有基于 flexbox 的网格系统的工作方式。代码如下：
.flex-container{
border: 1px solid red;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 320px;
}
.flex-item{
padding:1em;
box-sizing: border-box;
height: 160px;
width: 50%;
display:flex;
}
.flex-item>div {
border: 1px solid blue;
flex: 1 1 auto;
}<div class="flex-container">
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
</div>回答by Oriol
There are multiple ways to do this:
有多种方法可以做到这一点：
Use
calc:.flex-item { width: calc(50% - 2em); margin: 1em; }.flex-container { border: 1px solid red; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 320px; } .flex-item { border: 1px solid blue; box-sizing: border-box; height: calc(160px - 2em); width: calc(50% - 2em); margin: 1em; }<div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>Use nested boxes:
.flex-item { width: 50%; display: flex; } .flex-item > div { border: 1px solid blue; flex: 1; margin: 1em; }.flex-container { border: 1px solid red; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 320px; } .flex-item { height: 160px; width: 50%; display: flex; } .flex-item > div { border: 1px solid blue; flex: 1; margin: 1em; }<div class="flex-container"> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> </div>Place each row in a nowrap container, and use a positive flex-shrink factor
.row { display: flex; } .flex-item { width: 50%; margin: 1em; }.flex-container { border: 1px solid red; width: 320px; } .row { height: 160px; display: flex; } .flex-item { border: 1px solid blue; width: 50%; margin: 1em; }<div class="flex-container"> <div class="row"> <div class="flex-item"></div> <div class="flex-item"></div> </div> <div class="row"> <div class="flex-item"></div> <div class="flex-item"></div> </div> <div class="row"> <div class="flex-item"></div> <div class="flex-item"></div> </div> </div>Don't use
width. Instead, force line-breaks at the right places, and useflex: 1to make the elements grow to fill remaining space..flex-item { flex: 1; } .line-break { width: 100% }.flex-container { border: 1px solid red; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 320px; } .flex-item { border: 1px solid blue; box-sizing: border-box; height: calc(160px - 2em); flex: 1; margin: 1em; } .line-break { width: 100%; }<div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="line-break"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="line-break"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
使用
calc：.flex-item { width: calc(50% - 2em); margin: 1em; }.flex-container { border: 1px solid red; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 320px; } .flex-item { border: 1px solid blue; box-sizing: border-box; height: calc(160px - 2em); width: calc(50% - 2em); margin: 1em; }<div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>使用嵌套框：
.flex-item { width: 50%; display: flex; } .flex-item > div { border: 1px solid blue; flex: 1; margin: 1em; }.flex-container { border: 1px solid red; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 320px; } .flex-item { height: 160px; width: 50%; display: flex; } .flex-item > div { border: 1px solid blue; flex: 1; margin: 1em; }<div class="flex-container"> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> <div class="flex-item"><div></div></div> </div>将每一行放在 nowrap 容器中，并使用正的 flex-shrink 系数
.row { display: flex; } .flex-item { width: 50%; margin: 1em; }.flex-container { border: 1px solid red; width: 320px; } .row { height: 160px; display: flex; } .flex-item { border: 1px solid blue; width: 50%; margin: 1em; }<div class="flex-container"> <div class="row"> <div class="flex-item"></div> <div class="flex-item"></div> </div> <div class="row"> <div class="flex-item"></div> <div class="flex-item"></div> </div> <div class="row"> <div class="flex-item"></div> <div class="flex-item"></div> </div> </div>不要使用
width. 相反，在正确的位置强制换行，并用于flex: 1使元素增长以填充剩余空间。.flex-item { flex: 1; } .line-break { width: 100% }.flex-container { border: 1px solid red; box-sizing: border-box; display: flex; flex-wrap: wrap; width: 320px; } .flex-item { border: 1px solid blue; box-sizing: border-box; height: calc(160px - 2em); flex: 1; margin: 1em; } .line-break { width: 100%; }<div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="line-break"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="line-break"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
回答by aphextwix
Try this : -
尝试这个 ： -
.flex-container {
border: 1px solid red;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 320px;
}
.flex-item {
justify-content: space-around;
margin: 1%;
background: red;
border: 1px solid blue;
box-sizing: border-box;
height: 160px;
width: 48%;
}<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>