更好地设置Flexbox项目之间的距离
若要设置最小距离之间的flexbox项目我使用margin: 0 5px上的.item和margin: 0 -5px上的容器。 对我来说，这似乎是一个黑客，但我找不到更好的方法来做到这一点。
例
#box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; }
<div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div>
- Flexbox没有
collapsing margins。 - Flexbox没有任何内容，例如表格的
border-spacing。
因此，实现你所要求的是更加困难。
根据我的经验，“最干净”的方式，不使用:first-child / :last-child ，在flex-wrap:wrap上不做任何修改flex-wrap:wrap是在容器上设置padding:5px ， margin:5px 。 这将导致每个孩子之间以及每个孩子和他们的父母之间产生10px差距。
演示
.upper { margin:30px; display:flex; flex-direction:row; width:300px; height:80px; border:1px red solid; padding:5px; /* this */ } .upper > div { flex:1 1 auto; border:1px red solid; text-align:center; margin:5px; /* and that, will result in a 10px gap */ } .upper.mc /* multicol test */ {flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper"> <div>aaa<br/>aaa</div> <div>aaa</div> <div>aaa<br/>aaa</div> <div>aaa<br/>aaa<br/>aaa</div> <div>aaa</div> <div>aaa</div> </div> <div class="upper mc"> <div>aaa<br/>aaa</div> <div>aaa</div> <div>aaa<br/>aaa</div> <div>aaa<br/>aaa<br/>aaa</div> <div>aaa</div> <div>aaa</div> </div>
这不是一个破解。 引导程序及其网格也使用相同的技术，但是，引导程序使用填充来代替边距。
.row { margin:0 -15px; } .col-xx-xx { padding:0 15px; }
你可以使用透明的边框。
我试图构build一个可以回退到老式浏览器的table + table-cell模型的flex grid模型的时候已经考虑到了这个问题。 对于我来说，排水沟的边界在我看来是最合适的select。 即表格单元格没有边距。
例如
.column{ border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid transparent; }
还要注意，你需要min-width: 50px; 为flexbox。 flex模型不会处理固定大小，除非你做flex: none; 在你想要固定的特定子元素上，因此被排除在"flexi" 。 http://jsfiddle.net/GLpUp/4/但所有的列一起;flex:none; 不再是一个弹性模型。 这里更接近于一个flex模型： http : //jsfiddle.net/GLpUp/5/
所以，如果您不需要老式浏览器的表格单元回退，您通常可以正常使用边距。 http://jsfiddle.net/GLpUp/3/
设置background-clip: padding-box; 在使用背景时是必要的，否则背景会stream入透明边框区域。
flexbox和css calc（）
您好，以下是我所有支持flexbox的浏览器的工作解决scheme。 没有负边距，没有黑客，没有解决方法，纯Css。
小提琴演示
.flexbox { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .flexbox > div { /* 1/3 - 3 columns per row 10px - spacing between columns */ box-sizing: border-box; margin-bottom: 10px; width: calc(1/3*100% - (1 - 1/3)*10px); }
<div class="flexbox"> <div>col</div> <div>col</div> <div>col</div> <div>col</div> <div>col</div> <div>col</div> </div>
我find了一个基于select符~ preceded by的css的解决scheme，并允许无限嵌套。
看到这个代码笔为一个工作的例子
基本上，在列容器内部，每一个在另一个孩子之前的孩子都会得到一个顶部边缘。 同样，在每个行容器中，每个之前的另一个孩子都会得到一个左边距。
.box { display: flex; flex-grow: 1; flex-shrink: 1; } .box.columns { flex-direction: row; } .box.columns > .box ~ .box { margin-left: 5px; } .box.rows { flex-direction: column; } .box.rows > .box ~ .box { margin-top: 5px; }
<div class="box columns"> <div class="box" style="background-color: red;"></div> <div class="box rows"> <div class="box rows"> <div class="box" style="background-color: blue;"></div> <div class="box" style="background-color: orange;"></div> <div class="box columns"> <div class="box" style="background-color: yellow;"></div> <div class="box" style="background-color: pink;"></div> </div> </div> <div class="box" style="background-color: green;"></div> </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>
我用这个包装和固定宽度的列。 这里的关键是calc()
SCSS样本
$gap: 10px; dl { display: flex; flex-wrap: wrap; padding: $gap/2; dt, dd { margin: $gap/2;} dt { // full width, acts as header flex: 0 0 calc(100% - #{$gap});} dd { // default grid: four columns flex: 0 0 calc(25% - #{$gap});} .half { // hall width columns flex: 0 0 calc(50% - #{$gap});} }
完整的Codepen样品
具有-x（负）边距的 柔性容器以及具有x（正）边距或填充的 柔性项目都会导致所需的视觉效果：柔性项目之间只有一个固定的间距2x 。
这似乎只是一个偏好的问题，是否在弹性项目上使用边距或填充。
在这个例子中，flex项目被dynamic地缩放以保持固定的间隙：
.flex-container { margin: 0 -5px; display: flex; flex-flow: row wrap; justify-content: space-between; } .flex-item { margin: 0 5px; // Alternatively: padding: 0 5px; flex: 1 0 auto; }
比方说，如果你想设置项目之间的10px空间，你可以为所有项目设置.item {margin-right:10px;} ，并在最后一个.item:last-child {margin-right:0;}上重置.item:last-child {margin-right:0;} 。
Flexbox非常聪明，可以自动重新计算并平均分配网格。
的jsfiddle
body { margin: 0; } .container { display: flex; } .item { flex: 1; background: gray; height: 50px; margin-right: 10px; } .item:last-child { margin-right: 0; }
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
为什么不这样做：
.item + .item { margin-left: 5px; }
这使用相邻的兄弟select器 ，给所有的.item元素，除了第一个margin-left 。 由于flexbox，这甚至导致同样宽的元素。 当然，这也可以用垂直定位的元素和margin-top来完成。
在我的解决scheme中使用Flexbox我已经使用了父元素（容器）的justify-content属性，并且我已经在项目的flex-basis属性中指定了边距。 检查下面的代码片段：
.container { display: flex; flex-flow: row wrap; justify-content: space-around; margin-bottom: 10px; } .item { height: 50px; display: flex; justify-content: center; align-items: center; background-color: #999; } .item-1-4 { flex-basis: calc(25% - 10px); } .item-1-3 { flex-basis: calc(33.33333% - 10px); } .item-1-2 { flex-basis: calc(50% - 10px); }
<div class="container"> <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="container"> <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="container"> <div class="item item-1-2">1</div> <div class="item item-1-2">2</div> </div>
我发现这样做的最简单的方法是用百分比，只是允许边距与你的宽度相符
这意味着如果你在哪里使用你的例子，你最终会得到这样的结果
#box { display: flex; } .item { flex: 1 1 23%; margin: 0 1%; }
是否意味着你的价值观是基于宽度的，尽pipe这对每个人都不是好事。
下面是一个使用灵活框完成间距的卡UI元素的网格：
我很沮丧手动间隔卡操作填充和边缘iffy结果。 所以这里是我发现非常有效的CSS属性的组合：
.card-container { width: 100%; height: 900px; overflow-y: scroll; max-width: inherit; background-color: #ffffff; /*Here's the relevant flexbox stuff*/ display: flex; flex-direction: row; justify-content: center; align-items: flex-start; flex-wrap: wrap; } /*Supplementary styles for .card element*/ .card { width: 120px; height: 120px; background-color: #ffeb3b; border-radius: 3px; margin: 20px 10px 20px 10px; }
<section class="card-container"> <div class="card"> </div> <div class="card"> </div> <div class="card"> </div> <div class="card"> </div> </section>
它不会在任何情况下工作，但如果你有灵活的子宽度（％），并知道每行的项目数，你可以非常干净地指定必要的元素的边界使用nth-childselect器/秒。
这在很大程度上取决于“更好”的意思。 这种方式不需要额外的包装标记子元素或负面的元素 – 但这些东西都有自己的位置。
section { display: block width: 100vw; } .container { align-content: flex-start; align-items: stretch; background-color: #ccc; display: flex; flex-flow: row wrap; justify-content: flex-start; width: 100%; } .child-item { background-color: #c00; margin-bottom: 2%; min-height: 5em; width: 32%; } .child-item:nth-child(3n-1) { margin-left: 2%; margin-right: 2%; }
<html> <body> <div class="container"> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> <div class="child-item"></div> </div> </body> </html>
我在这里发布了我的flexbox方法：
我拒绝的一个想法是从外部列删除填充像这样的东西：
div:nth-child(#{$col-number}n+1) { padding-left: 0; } div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }
但是，像这里的其他海报一样，我更喜欢负边缘的诡计。 我的小提琴也有响应任何人正在寻找基于Sass的解决scheme。 我基本上使用这种方法来代替网格。
我早先遇到同样的问题，然后偶然发现了这个问题的答案。 希望能帮助他人以备日后参考。
长答案短，添加一个边界到你的孩子flex-items。 那么你可以在flex-items之间指定任何你喜欢的边距。 在代码片段中，我使用黑色作为说明，如果您喜欢，可以使用“透明”。
#box { display: flex; width: 100px; /* margin: 0 -5px; *remove this*/ } .item { background: gray; width: 50px; height: 50px; /* margin: 0 5px; *remove this*/ border: 1px solid black; /* add this */ } .item.special{ margin: 0 10px; }
<div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item special'></div> </div>
这是我的解决scheme，不需要在子元素上设置任何类：
.flex-inline-row { display: inline-flex; flex-direction: row; } .flex-inline-row.flex-spacing-4px > :not(:last-child) { margin-right: 4px; }
用法：
<div class="flex-inline-row flex-spacing-4px"> <span>Testing</span> <span>123</span> </div>
除了上面给出的内联示例之外，相同的技术可以用于正常的弹性行和列，并且可以使用除4px以外的间隔的类进行扩展。
#box { display: flex; width: 100px; } .item { background: gray; width: 50px; height: 50px; } /* u mean utility */ .u-gap-10 > *:not(:last-child) { margin-right: 10px; }
<div id='box' class="u-gap-10"> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div>
Columnify – N列的独奏class
Flexbox和SCSS
.columnify { display: flex; > * { flex: 1; &:not(:first-child) { margin-left: 2rem; } } }
Flexbox和CSS
.columnify { display: flex; } .columnify > * { flex: 1; } .columnify > *:not(:first-child) { margin-left: 2rem; }
<div class="columnify"> <div style="display: inline-block; height: 20px; background-color: blue;"></div> <div style="display: inline-block; height: 20px; background-color: blue"></div> <div style="display: inline-block; height: 20px; background-color: blue"></div> </div>
