具有最大高度的 flex 元素的列对齐

Question

here is flex element with flex: column wrap; and max-height: 150px; . My problem is that justify-content not working. But working with height: 150px . For container with max-width: 100%; & flex-direction: row; aligment works properly

 .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>

Result

Expected result

Answer 1

Not sure if it's a bug or an intended result but you can fix it if you consider an extra wrapper where you apply the max-height property:

 .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>

Worth to note that if you consider height instead of max-height it works fine:

 .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>