Flexbox layout dynamically modifies its child elements sizes to fill out the available area.
<div class="wt-flexbox-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
.wt-flexbox-container { display: flex; flex-wrap: wrap; justify-content: space-around; } .wt-flexbox-container>div { border-style: solid; border-width: 1px; padding: 10px; text-align: center; flex: 1; min-width: 200px; }
Last updated 6 years ago