Flexbox layout

The flexible boxes, or flexbox, is a new layout mode in CSS3. Flexbox mode providing for the arrangement of elements on a web pages. Improve the items alignments, directions and order in the container even when they are with dynamic size.

Child elements in a flexbox can be align in any direction and can have flexible dimensions to adapt in the screen. It doesn't required to use float for aligning left and right.

Usage

Flexbox is the property of display. So you can set the display property on the parent HTML.

.flex-wrapper {
  display: -webkit-flex; /* Webkit */
  display: flex;
}

Flexbox Properties

These are the below flex properties.

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
• order
• align-self
• flex-grow
• flex-shrink
• flex-basis
• flex

Flexbox example