我试图在标准CSS中实现一个简单的事情.
假设我有一个有3列和3列的网格系统box-sizing: border-box.
这意味着我将适合3个盒子,并且边距会缩小尺寸以适应最多3个盒子.
但是当我尝试用FLEXBOX做到这一点时,这真是一种痛苦!
因此,如果我有div,flex: 1 1 33.33%; margin: 10px;我希望每行有3个盒子......但是如果我使用的话flex-wrap: wrap,那将不会缩小到适合3个盒子.
这是一个例子..这个想法是第二行连续有3个盒子,第四个盒子在最后一行.
谢谢
https://jsfiddle.net/mariohmol/pbkzj984/14/
.horizontal-layout {
display: flex;
flex-direction: row;
width: 400px;
}
header>span {
/* flex: 1 1 100%; */
/* flex: 1 0 100%; */
flex: 1 1 33.33%;
margin: 10px;
}
header>.button {
background-color: grey;
}
header>.app-name {
background-color: orange;
}
header#with-border-padding {
flex-wrap: wrap;
}
header#with-border-padding>span {
flex: 1 1 33.33%;
box-sizing: border-box;
/* this is not useful at …