CSS Flexbox

The flexible box module makes it easy to design responsive layout structure without the use of float or positioning.

To use the Flexbox model, you need to define a flex container.

The box above represents a flex container with three flex items.

Here is an example:

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

The flex container becomes “flexible” by setting the display property in css to flex.

.flex-container {
    display: flex;
}

The flex-direction property defines which direction the container will stack each of the flex items.

Here is the example:

.flex-container {
    display: flex;
    flex-direction: column;
}

The column reverse value will stack each of the flex items vertically from bottom to top

Here is the example:

.flex-container {
    display: flex;
    flex-direction: column-reverse;
}

The row value stacks each flex items horizontally from left to right.

Here is the example:

.flex-container {
    display: flex;
    flex-direction: row;
}

The row-reverse value stacks each of the flex items horizontally form right to left.

.flex-container {
    display: flex;
    flex-direction: row-reverse;
}