设置弹性框项目之间距离的更好方法

本文翻译自：Better way to set distance between flexbox items

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. 要设置我使用Flexbox的项目之间的最小距离margin: 0 5px上.item和margin: 0 -5px集装箱。 For me it seems like a hack, but I can't find any better way to do this. 对我来说，这似乎是一种hack，但是我找不到更好的方法来做到这一点。

Example 例

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

#1楼

参考：https://stackoom.com/question/1OXwT/设置弹性框项目之间距离的更好方法

#2楼

Flexbox doesn't have collapsing margins. Flexbox的利润率没有下降。
Flexbox doesn't have anything akin to border-spacing for tables (except for CSS property gap which isn't well supported in most browsers, caniuse ) Flexbox与表格的border-spacing没有任何区别（除了CSS属性gap外，大多数浏览器都无法很好地支持CSS属性gap ， caniuse ）

Therefore achieving what you are asking for is a bit more difficult. 因此，实现您的要求会有点困难。

In my experience, the "cleanest" way that doesn't use :first-child / :last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. 以我的经验，不使用:first-child / :last-child且不对flex-wrap:wrap进行任何修改的“最干净”方式是在容器上设置padding:5px ，在子padding:5px上设置margin:5px 。 That will produce a 10px gap between each children and between each children and their parent. 这将在每个孩子之间以及每个孩子与其父母之间产生10px间隙。

Demo 演示版

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

#3楼

You can use transparent borders. 您可以使用透明边框。

I have contemplated this issue while trying to build a flex grid model which can fallback to a tables + table-cell model for older browsers. 我在尝试构建Flex网格模型时曾考虑过这个问题，该模型可以回退到旧浏览器的table + table-cell模型。 And Borders for column gutters seemed to me the best appropriate choice. 在我看来，用于装订线槽的边框是最佳的选择。 ie Table-cells don't have margins. 即表格单元格没有边距。

eg 例如

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

Also note that you need min-width: 50px; 还要注意，您需要min-width: 50px; for flexbox. 用于flexbox。 The flex model will not handle fixed sizes unless you do flex: none; 除非您进行flex: none;否则flex模型将不处理固定大小flex: none; on the particular child element you want as fixed and therefore excluded from being "flexi" . 在您想要固定的特定子元素上，因此排除在"flexi" 。 http://jsfiddle.net/GLpUp/4/ But all columns together with flex:none; http://jsfiddle.net/GLpUp/4/但所有列以及flex:none; is no longer a flex model. 不再是flex模型。 Here is something closer to a flex model: http://jsfiddle.net/GLpUp/5/ 这是更接近flex模型的内容： http : //jsfiddle.net/GLpUp/5/

So you can actually use margins normally if you don't need the table-cell fallback for older browsers. 因此，如果您不需要旧版浏览器的表格单元回退，则实际上可以正常使用页边距。 http://jsfiddle.net/GLpUp/3/ http://jsfiddle.net/GLpUp/3/

Setting background-clip: padding-box; 设置background-clip: padding-box; will be necessary when using a background, as otherwise the background will flow into the transparent border area. 使用背景时将很有必要，否则背景将流入透明边框区域。

#4楼

I find the easiest way of doing this is with percentages and just allowing the margin to tally up your width 我发现最简单的方法是使用百分比，并且仅允许边距增加宽度

This means you end up with something like this if you where using your example 这意味着如果您使用示例，则最终会得到类似的结果

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Does mean your values are based on the width though which might not be good for everybody. 确实意味着您的值基于宽度，但这可能并不适合所有人。

#5楼

Moving on from sawa's answer, here's a slightly improved version that allows you to set a fixed spacing between the items without the surrounding margin. 从sawa的答案继续，这是一个略有改进的版本，可让您在项目之间设置固定的间距而没有周围的空白。

http://jsfiddle.net/chris00/s52wmgtq/49/ http://jsfiddle.net/chris00/s52wmgtq/49/

Also included is the Safari "-webkit-flex" version. 还包括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>

#6楼

This is not a hack. 这不是黑客。 The same technique is also used by bootstrap and its grid, though, instead of margin, bootstrap uses padding for its cols. 引导程序及其网格也使用了相同的技术，尽管引导程序使用填充作为其cols来代替空白。

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

asdfgh0077

发布了0 篇原创文章 · 获赞 8 · 访问量 3万+

私信关注

设置弹性框项目之间距离的更好方法

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

猜你喜欢