是否可以将固定边距(例如5px)应用于flexbox布局中的单元格,其中行空间均匀分布在其列中？
想要实现:
我当前的CSS只会在一行中对齐3列:
的jsfiddle
.row {
display: flex;
flex-flow: row wrap;
box-shadow: 0 0 0 1px green;
}
.col {
flex: 0 0 25%;
text-align: center;
box-shadow: 0 0 0 1px blue;
background-color: steelblue;
margin: 5px;
}
1
2
3
4
5
你可以使用calc()作为flex-basis长度(在你的情况下 - 它是速记属性flex),10px因为margin-left: 5px和margin-right: 5px:
的jsfiddle
.row {
display: flex;
flex-flow: row wrap;
box-shadow: 0 0 0 1px green;
}
.col {
flex: 0 0 calc(25% - 10px);
text-align: center;
box-shadow: 0 0 0 1px blue;
background-color: steelblue;
margin: 5px;
}
1
2
3
4
5
京公网安备 11010802040832号 | 京ICP备19059560号-6 