CSS Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Before the Flexbox Layout module, there were four layout modes:

1. Block, for sections in a web page
2. Inline, for text
3. Table, for two-dimensional table data
4. Positioned, for explicit position of an element

The flex container becomes flexible by setting the display property to flex.

.flex-container {
 display: flex;
}

The flex-direction property defines in which direction the container wants to stack the flex items.

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

The justify-content property is used to align the flex items. For example,

.flex-container {
 display: flex;
 justify-content: flex-end;
}

The flex-start value aligns the flex items at the beginning of the container (this is default). The flex-end value aligns the flex items at the end of the container. The center value aligns the flex items at the center of the container. The space-around value displays the flex items with space before, between, and after the lines.

The align-items property is used to align the flex items.

.flex-container {
 display: flex;
 align-items: center;
}

The center value aligns the flex items in the middle of the container. The flex-start value aligns the flex items at the top of the container. The flex-end value aligns the flex items at the bottom of the container.

Note: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered.