要设置flexbox项目之间的最小距离，我使用margin: 0 5px on .item和margin: 0 -5px on container。对我来说，这似乎是一种hack，但我找不到更好的方法来做到这一点。
#箱{ 显示:flex; 宽度:100 px; Margin: 0 -5px; ｝ .item { 背景:灰色; 宽度:50 px; 高度:50 px; 边距:0 5px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >
当前回答
我已经找到了一个基于一般兄弟选择器~的解决方案，并允许无限嵌套。
有关工作示例，请参阅此代码笔
基本上，在列容器中，前面有另一个子容器的每一个子容器都有上边距。同样，在每个行容器中，前面有另一个子容器的子容器都有左边距。
.box { 显示:flex; flex-grow: 1; flex-shrink: 1; ｝ .box。列{ flex-direction:行; ｝ .box.columns > .box ~。盒子{ margin-left: 5 px; ｝ .box。行{ flex-direction:列; ｝ .box.rows > .box ~。盒子{ margin-top: 5 px; ｝ <div class="box columns"> < span style=" font - family:宋体;"> < / div > <div class="box rows"> <div class="box rows"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > <div class="box columns"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div >
其他回答
我之前遇到过同样的问题，然后偶然发现了这个问题的答案。希望对大家有所帮助，供今后参考。
长话短说，给孩子的弹性物品添加边框。 然后，您可以指定flex项之间的空白。 在代码片段中，我使用黑色来说明，如果你喜欢，你可以使用“透明”。
#箱{ 显示:flex; 宽度:100 px; /* margin: 0 -5px;*删除* / ｝ .item { 背景:灰色; 宽度:50 px; 高度:50 px; /* margin: 0 5px;*删除* / 边框:1px纯黑色;/*添加这个*/ ｝ .item。特殊{边距:0 10px;｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > <div class='item special'></div> < / div >
我已经找到了一个基于一般兄弟选择器~的解决方案，并允许无限嵌套。
有关工作示例，请参阅此代码笔
基本上，在列容器中，前面有另一个子容器的每一个子容器都有上边距。同样，在每个行容器中，前面有另一个子容器的子容器都有左边距。
.box { 显示:flex; flex-grow: 1; flex-shrink: 1; ｝ .box。列{ flex-direction:行; ｝ .box.columns > .box ~。盒子{ margin-left: 5 px; ｝ .box。行{ flex-direction:列; ｝ .box.rows > .box ~。盒子{ margin-top: 5 px; ｝ <div class="box columns"> < span style=" font - family:宋体;"> < / div > <div class="box rows"> <div class="box rows"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > <div class="box columns"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div >
你可以试试CSS3的:not选择器
Eg:
#箱{ 显示:flex; 宽度:100 px; 边框:1px红色实体; ｝ .item { 背景:灰色; 宽度:10 px; 身高:100 px; Flex: 1台自动; ｝ .item:没有(胎){ margin-right: 5 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >
做到这一点的简单方法是在children div中添加margin-left和margin-right，并相应地调整margin值
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
css:
.a{
display: flex;
justify-content: center;
background-color: black;
}
.b{
height: 25px;
width: 25px;
background-color: grey;
margin-left: 5px;
margin-right: 5px;
}
在我的解决方案中使用Flexbox，我为父元素(容器)使用了justify-content属性，并在项目的flex-basis属性中指定了边界。 检查下面的代码片段:
.container { 显示:flex; Flex-flow:行换行; justify-content:空间; margin-bottom: 10 px; ｝ .item { 高度:50 px; 显示:flex; justify-content:中心; 对齐项目:中心; background - color: # 999; ｝ .item-1-4 { 弹性基础:calc(25% - 10px); ｝ .item-1-3 { flex- base: calc(33.33333% - 10px); ｝ .item-1-2 { Flex-basis: calc(50% - 10px); ｝ < div class = "容器" > <div class="item item-1-4">1</div> . <div class="item item-1-4">2</div> . <div class="item item-1-4">3</div> . <div class="item item-1-4">4</div> . < / div > < div class = "容器" > <div class="item item-1-3">1</div> . <div class="item item-1-3">2</div> . <div class="item item-1-3">3</div> . < / div > < div class = "容器" > <div class="item item-1-2">1</div> . <div class="item item-1-2">2</div> < / div >
