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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.