Flex Layout

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;

}

https://codepen.io/younes-jaaidi/pen/KxooqG

More Links

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-TricksCSS-Tricks