要设置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 >
当前回答
你可以试试CSS3的:not选择器
Eg:
#箱{ 显示:flex; 宽度:100 px; 边框:1px红色实体; ｝ .item { 背景:灰色; 宽度:10 px; 身高:100 px; Flex: 1台自动; ｝ .item:没有(胎){ margin-right: 5 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >
其他回答
:根{ ——内部:20 px; ——差距:10 px;/*与gutter */相同 /* flex-flow in row ---------------------*/ ——行换行:行换行; ——row-nowrap:行nowrap; /* flex-flow in col ---------------------*/ ——col-wrap:圆柱包裹; ｝ .row { 显示:flex; flex-direction: var(——flex-row); ｝ /*额外的包装类(如果需要) -------------------------------------------*/ .nowrap { 显示:flex; flex-flow: var(——row-nowrap); ｝ .wrap { 显示:flex; flex-flow: var(——col-wrap); ｝ /*----------------------------------------*/ (类* =“上校——”){ 边框:1px实心#ccc; 保证金:var(差距); 填充:var(内部); 高度:汽车; 背景:# 333; Flex: 10自动; ｝ .col-3 { flex: 3; ｝ < div class = "行" > < div class = ' col-3 ' > < / div > < div class = ' col-3 ' > < / div > < div class = ' col-3 ' > < / div > < div class = ' col-3 ' > < / div > < / div >
您还可以查看这个示例。
一个带有-x(负)边距的伸缩容器和带有x(正)边距或填充的伸缩项都会导致预期的视觉结果:伸缩项之间只有2x的固定间距。
这似乎只是一个偏好问题，是在伸缩项上使用边距还是填充。
在这个例子中，为了保持固定的间隙，伸缩项是动态缩放的:
.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;
}
你可以用下面的方程
.container { max-width: 960 px; 保证金:0自动; 填充:4rem 0; ｝ .flex { 显示:flex; 对齐项目:中心; justify-content:之间的空间; flex-wrap:包装; ｝ .flex:{后 内容:“”; max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex:{后 max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); ｝ ｝ @media (max-width: 680px) { .flex:{后 max-width: calc(100% * var(——colMobile) / 12 - var(——gap)); ｝ ｝ .flex .item { max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex .item { max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); margin-bottom: 1快速眼动; ｝ .flex .item:last child { margin-bottom:设置; ｝ ｝ @media (max-width: 680px) { .flex .item { max-width: calc(100% * var(——colMobile) / 12); ｝ ｝ .flex .item .card { 背景:# eee; text-align:中心; 填充:2快速眼动; ｝ <div class="flex container" style="——col: 3;——colTablet: 6;——colMobile: 12个;——差距:2%”> <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > < / div >
你可以使用透明边框。
我在尝试构建一个灵活的网格模型时考虑过这个问题，该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来，作为圆柱排水沟的Borders似乎是最合适的选择。例如，表格单元格没有边距。
e.g.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
还要注意你需要min-width: 50px;flexbox。flex模型不会处理固定大小，除非你执行flex: none;在你想要固定的子元素上，因此被排除在“可伸缩”之外。http://jsfiddle.net/GLpUp/4/ 但是所有列和flex一起:none;不再是弹性模型。 这里有一个更接近flex模型的东西:http://jsfiddle.net/GLpUp/5/
所以你可以正常使用页边距如果你不需要旧浏览器的表单元格回退。http://jsfiddle.net/GLpUp/3/
背景剪辑:填充盒;在使用背景时将是必要的，否则背景将流入透明边框区域。
根据#ChromeDevSummit的说法，在Firefox和基于chrome的浏览器中，Flexbox有一个gap属性的实现。
这是一个现场演示
