具有最大高度的 flex 元素的列對齊

Question

這是帶有flex: column wrap; flex 元素flex: column wrap; 和max-height: 150px; . 我的問題是justify-content不起作用。 但是使用height: 150px 。 對於max-width: 100%;容器max-width: 100%; & flex-direction: row; 對齊工作正常

 .container { max-height: 150px; display: flex; flex-flow: column wrap; justify-content: center; } .item { width: 25%; height: 50px; border: 1px solid #000; box-sizing: border-box; }

 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

結果

預期結果

Answer 1

不確定這是錯誤還是預期結果，但如果您考慮使用額外的包裝器來應用max-height屬性，則可以修復它：

 .container { display: flex; flex-flow: column wrap; justify-content: center; width:100%; } .item { width: 25%; height: 50px; border: 1px solid #000; box-sizing: border-box; } .extra { max-height: 150px; display:flex; }

 <div class="extra"> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>

值得注意的是，如果您考慮height而不是max-height它工作正常：

 .container { display: flex; flex-flow: column wrap; justify-content: center; height: 150px; } .item { width: 25%; height: 50px; border: 1px solid #000; box-sizing: border-box; }

 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>