这就是我要的：
但这是我最接近的：
body{
margin: 0;
padding: 0;
border: 1px solid red;
}
.flex{
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flexbox;
display: -webkit-flex;
display: flex;
}
.flex > *{ margin: 0 10px; }
.flex > :first-child{ margin-left: 0; }
.flex > :last-child{ margin-right: 0; }
.flex.vertical > *{ margin: 10px 0; }
.flex.vertical > :first-child{ margin-top: 0; }
.flex.vertical > :last-child{ margin-bottom: 0; }
.vertical{
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.box{
background: #000;
flex: auto;
min-height: 100px;
}
<div class="flex vertical">
<div class="flex">
<div class="box"> </div>
<div class="box"> </div>
</div>
<div class="flex">
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
</div>
<div class="flex">
<div class="box"> </div>
<div class="box"> </div>
</div>
</div>
我在弹性盒项目上应用了边距，然后从第一个和最后一个子项中删除了一半。
问题是:first-child并不总是视觉上的第一个，因为我可能会使用弹性盒排序实用程序更改布局顺序。例如：
.flex > *{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
#important{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
body{
margin: 0;
padding: 0;
border: 1px solid red;
}
.flex{
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flexbox;
display: -webkit-flex;
display: flex;
}
.flex > *{ margin: 0 10px; }
.flex > :first-child{ margin-left: 0; }
.flex > :last-child{ margin-right: 0; }
.flex.vertical > *{ margin: 10px 0; }
.flex.vertical > :first-child{ margin-top: 0; }
.flex.vertical > :last-child{ margin-bottom: 0; }
.vertical{
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.box{
background: #000;
flex: auto;
min-height: 100px;
}
<div class="flex vertical">
<div class="flex">
<div class="box"> </div>
<div class="box"> </div>
</div>
<div class="flex">
<div class="box"> </div>
<div class="box" id="important"> </div>
<div class="box"> </div>
</div>
<div class="flex">
<div class="box"> </div>
<div class="box"> </div>
</div>
</div>
有没有办法在应用边距时考虑视觉顺序？
CSS 规范最近已发布updated https://developer.mozilla.org/en-US/docs/Web/CSS/gap#Flex_layout申请gap除了 CSS 网格元素之外，还有 Flexbox 元素的属性。所有主流浏览器的最新版本均支持此功能 https://caniuse.com/#feat=flexbox-gap。随着gap财产，你只需要得到你想要的gap: 10px（或任何你想要的尺寸）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
