* {
margin:0;
}
#container {
height:800px;
display:flex;
flex-direction:column;
justify-content:space-between;
background-color:grey;
}
#box-1 {
background-color:green;
height:400px;
flex:1
}
#box-2 {
background-color:yellow;
height:200px;
flex:1;
}
#box-3 {
background-color:pink;
height:100px;
flex:1;
}
<body>
<div id="container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
</div>
</body>
有没有人能告诉我,有没有其他方法可以把每个div都放到33%的div中,这样我就不需要在每次添加了一些边距/填充时重新计算它?我想知道我在学习flexbox的过程中是否遗漏了什么。谢谢。
发布于 2018-07-14 17:38:27
你错过了flex-direction:row;
,如下所示:
* {
margin:0;
}
#container {
height:800px;
display:flex;
flex-direction:column;
justify-content:space-between;
background-color:grey;
flex-direction:row;
}
#box-1 {
background-color:green;
height:400px;
flex:1
}
#box-2 {
background-color:yellow;
height:200px;
flex:1;
}
#box-3 {
background-color:pink;
height:100px;
flex:1;
}
<div id="container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
</div>
https://stackoverflow.com/questions/51336883
复制相似问题