下面是一个使用灵活的方框完成间距的卡片UI元素网格:

我很沮丧手动间距卡操纵填充和空白与可疑的结果。下面是我发现的非常有效的CSS属性组合:

.card-container { 宽度:100%; 身高:900 px; overflow-y:滚动; max-width:继承; background - color: # ffffff; /*这里是有关flexbox的东西*/ 显示:flex; flex-direction:行; justify-content:中心; 对齐项目:flex-start; flex-wrap:包装; ｝ /* .card元素*/的补充样式 .card { 宽度:120 px; 身高:120 px; background - color: # ffeb3b; border - radius: 3 px; Margin: 20px 10px 20px 10px; ｝ <节课= " card-container " > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / 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 >

我找到了一个黑客，因为我真的很需要这个。

/* grid */ .container { 显示:flex; Flex-flow:行换行; justify-content:之间的空间; ｝ .container::在/*之后，这确保奇数元素向左，而不是*/之间的空格 .item { 内容:“”; 宽度:calc(33.3333% - 20px); margin-bottom: 40像素; ｝ /*额外的样式-不重要*/ .item { 身高:100 px; 背景:# 787878; ｝ < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >

这是一个带有很好的伸缩增长类别的post网格。 我想你会喜欢的。 看到Codepen

假设:

你想要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 >

在我的解决方案中使用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 >

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