flex佈局之flex-basis採坑
阿新 • • 發佈：2018-12-07
場景：
容器設定為display: flex，容器裡的子專案部分設定 flex: auto，子專案的寬高自適應正常，但如果再往子專案裡巢狀一個（如：div），並設定高度（如：height: 100%），發現該元素高度不符合預期。
原始碼：
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> html,body{ margin: 0px; padding: 0px; height: 99%; } div{ padding: 5px 10px; border: 1px solid silver; } .container { height: 90%; } .flex{ display: flex; flex-direction: column; } .item { flex: 1 1 auto; overflow: auto; } </style> </head> <body> <div class="flex container"> <div class=""> <h3>頭部資訊 - 未設定高度資訊</h3> </div> <hr> <div class="item"> flex: auto時高度自適應情況<div class="container"> 內部巢狀要求自適應高度（百分比）的div </div> </div> </div> </body> </html>
不符預期圖：
預期效果圖：
為達到預期其實只對樣式略微做了調整：
.item {
flex: 1 1 100%;
overflow: auto;
}
flex是一種簡寫，最後一個值其實就是對應flex-basis的設定，如果同時設定flex-basis和height，那麼height屬性會被覆蓋，也就是說flex-basis的優先順序比height高。有一點需要注意，如果flex-basis和width其中有一個是auto，那麼另外一個非auto的屬性優先順序會更高。