CSS 3 Flex Box

CSS 3 Flex Box

by Angelo Rogério Rubin

HTML

<div class="container">
    <div class="item">
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
    </div>
    <div class="item">
        box 2
    </div>
    <div class="item">
        box 3
    </div>
</div>

CSS

.container {
    display: flex; /* or inline-flex */
    background-color: gray;
    height: auto;
}

.item {
    flex-grow: 200px; /* default 0 */
    background-color: salmon;
    margin: 1px;
}