要设置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 >
这种解决方案适用于所有情况,即使有多行或任意数量的元素。但是section的计数应该是一样的,你想在第一行有4个,第二行有3个,这样不行,第4个内容的空间将是空白的,容器不会填充。
我们使用display: grid;以及它的性质。
#箱{
显示:网格;
宽度:100 px;
grid-gap: 5 px;
/*项目之间的空格*/
grid-template-columns:重复(4 1 fr);
/*决定列的数量(4)和大小(1fr | 1分数|你也可以使用像素和其他值)*/
}
.item {
背景:灰色;
宽度:100%;
/* width是没有必要的,只是添加这个来理解width工作为网格模板分配空间的100%**默认宽度将是100%** */
高度:50 px;
}
< div id =“盒子”>
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< / div >
这种方法的缺点是在移动Opera Mini将不被支持,在PC上只有在IE10之后才能工作。
注意,完整的浏览器兼容性包括IE11,请使用Autoprefixer
旧的答案
不要认为它是一个旧的解决方案,如果你只想要单行元素,它仍然是最好的解决方案之一,它可以在所有浏览器上工作。
这个方法是由CSS兄弟姐妹组合使用的,所以你也可以用许多其他的方式来操作它,但如果你的组合是错误的,它也可能会导致问题。
.item+.item{
margin-left: 5px;
}
下面的代码将完成这个任务。在这种方法中,不需要给出margin: 0 -5px;到#box包装器。
为您提供一个工作示例:
#箱{
显示:flex;
宽度:100 px;
}
.item {
背景:灰色;
宽度:22 px;
高度:50 px;
}
.item + .item {
margin-left: 5 px;
}
< div id =“盒子”>
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< / div >
我用了另一种方法。在容器上使用负边距,这需要与每个子容器相同,例如10px。
然后对每个子元素使用calc()减少每边的总边距宽度,在本例中为20px。
这里有一个例子:https://codepen.io/anon/pen/KJLZVg
这有助于响应地处理事情,因为您不需要针对特定的第n个子以保持它在包装时在容器的每一侧保持齐平。
.parent {
padding: 0 10px;
}
.container {
display: flex;
margin: 0 -10px;
flex-wrap: wrap;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.child {
margin: 0 10px 25px 10px;
flex: 0 0 calc(25% - 20px);
height: 40px;
background: red;
}
<div class="parent">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
同样使用flex: 0 0(宽度),它有助于IE浏览器。
嗯,在我看来,关于CSS最简单的解决方案,
是在HTML中添加间隔符:
<div id='box'>
<div class='item'></div>
<div style='width: 5px;'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
所以,你可以用内联风格或类名来控制它。
有时候,也可以用填充来做间距。
下面是一个例子
好吧,现在你有一个缺口,所以你可以使用它,但好的ol技术仍然是不可避免的,像<div><div></div></div>包装构造独特的项目与独特的缺口(使用填充物为缺口!和ofc新的gap属性)
从sawa的答案开始,这里有一个稍微改进的版本,允许您在没有周围边距的情况下设置项目之间的固定间距。
http://jsfiddle.net/chris00/s52wmgtq/49/
还包括Safari“-webkit-flex”版本。
.outer1 {
background-color: orange;
padding: 10px;
}
.outer0 {
background-color: green;
overflow: hidden;
}
.container
{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
background-color: rgba(0, 0, 255, 0.5);
margin-left: -10px;
margin-top: -10px;
}
.item
{
flex-grow: 1;
-webkit-flex-grow: 1;
background-color: rgba(255, 0, 0, 0.5);
width: 100px;
padding: 10px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
color: white;
}
<div class="outer1">
<div class="outer0">
<div class="container">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
假设:
你想要4列网格布局与包装
项目的数量不一定是4的倍数
除了第1、5、9项以外,每项都设置左距;并在每个项目上设置固定宽度。如果左边的边距是10px,那么每行4个项目之间的边距是30px,项目宽度的百分比可以计算如下:
100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4
这是一个体面的工作,涉及flexbox最后一行的问题。
.flex {
显示:flex;
flex-direction:行;
flex-wrap:包装;
保证金:1em 0;
background - color:桃色;
}
.item {
margin-left: 10 px;
边框:1px实体;
填充:10 px;
宽度:calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
background - color:番木瓜;
}
.item:n -child(4n + 1) {
margin-left: 0;
}
.item:n -child(n + 5) {
margin-top: 10 px;
}
flex < div class = " " >
< div class = "项目" > < / div > 1
< div class = "项目" > < / div > 2
< div class = "项目" > 3 < / div >
4 < div class = "项目" > < / div >
< / div >
flex < div class = " " >
< div class = "项目" > < / div > 1
< div class = "项目" > < / div > 2
< div class = "项目" > 3 < / div >
4 < div class = "项目" > < / div >
5 < div class = "项目" > < / div >
< div class = "项目" > < / div > 6
< / div >
flex < div class = " " >
< div class = "项目" > < / div > 1
< div class = "项目" > < / div > 2
< div class = "项目" > 3 < / div >
4 < div class = "项目" > < / div >
5 < div class = "项目" > < / div >
< div class = "项目" > < / div > 6
< div class = "项目" > < / div > 7
< div class = "项目" > < / div > 8
< div class = "项目" > < / div > 9
< / div >