Flexbox垂直填充可用空間現在flexbox連續我都可以寫<div layout="row">
<div>some content</div>
<div flex></div> <!-- fills/grows available space -->
<div>another content</div></div>我希望實現相同但垂直，就像在這張圖片上 目前的問題是，需要增長的div沒有任何高度，因此兩個內容相互低于。我希望我的第二個內容位于具有固定高度的父容器的底部！我知道我可以通過將第二個內容定位為絕對來解決這個問題bottom: 0;但是我可以實現flexbox嗎？
2 回答
一只萌萌小番薯
TA貢獻1795條經驗 獲得超7個贊
你只需要flex-direction: column在父和flex: 1中間div上使用。
body,html {
padding: 0;
margin: 0;}.row {
display: flex;
flex-direction: column;
min-height: 100vh;}.row > div:not(.flex) {
background: #676EE0;}.flex {
flex: 1;
background: #67E079;}<div class="row"> <div>some content</div> <div class="flex"></div> <!-- fills/grows available space --> <div>another content</div></div>
- 2 回答
- 0 關注
- 1054 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消