我通过flexbox使用flex-wrap进行以下安排,并且元素能够使用flex-grow进行拉伸:
每个项目的各方都有边距。这是为了将项目彼此分开,但副作用是整个块具有我想要崩溃的边缘。可以使用nth-child(-n+3) { margin-top: 0; }
之类的规则来完成,但由于容器大小可能会有所不同,因此每行和任意数量的行都可以有任意数量的项目。所以我想知道flex-box是否有办法在这样的设置中折叠外边距,同时保留项之间的边距。
HTML只是容器内的6个项目。
CSS(Sass)如下:
.container
display: flex
flex-wrap: wrap
background: #eef
align-items: stretch
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
答案 0 :(得分:5)
这有点像黑客,但你可以在flex容器上添加一个负余量来取消这些项目'边缘边缘,然后移动其背景"样式化为父包装元素。
更新了CSS(SASS):
.wrapper
background: #eef
border: 1px solid darkgray
.container
display: flex
flex-wrap: wrap
margin: -1em
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
答案 1 :(得分:0)
另一种方法是在容器和物品之间$margin
是1em
):< / p>
•容器关心其项目的底部边距和左半边+半右:
.container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; // Go to next line if not enough space
padding-top: 0; // Let items handle top
padding-left: $margin/2; // Handle half of left
padding-bottom: $margin; // Handle bottom
padding-right: $margin/2; // Handle half of right
}
•项目关心顶部和左半边+右半边:
.item {
flex-grow: 1; // Use available space
margin-left: $margin/2; // Handle other half of left
margin-right: $margin/2; // Handle other half of right
margin-top: $margin; // Handle top
}
关于项目大小,如果您希望项目看起来相同,可以设置width
。
.item.fixed {
width: 15em;
}
查看demo here。