CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will “flex” to different sizes to fill the space.

There were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

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

CSS Flex Container

The element on which display: flex or display: inline-flex is applied becomes a flex formatting context for the containing box’s children, known as the flex container. Once we have created a flex container (by adding a display: flex or display: inline-flex), we need to learn how to manipulate the layout of the container’s children.

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

To create a flex container, we set the value of the area’s container’s display property to flex or inline-flex.

.flex-container {
display: flex;
}

The flex container properties are:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

The flex-direction Property

If you want your layout to go from top to bottom, left to right, right to left, or even bottom to top, you can use flex-direction it to control the main axis along which the flex items get laid out.

Shows the four values of, including row, row-reverse, column, and column-reverse.

Column

The column value stacks the flex items vertically (from top to bottom):

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

Column-reverse

The column-reverse value stacks the flex items vertically (but from bottom to top):

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

Row

The row value stacks the flex items horizontally (from left to right):

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

Row-reverse

The row-reverse value stacks the flex items horizontally (but from right to left):

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

The flex-wrap Property

The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.

Property Values:

nowrap

The default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.

.flex-container {
display: flex;
flex-wrap: nowrap;
}

wrap

This property is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item width.

.flex-container {
display: flex;
flex-wrap: wrap;
}

wrap-reverse

This property is used to reverse the flow of the flex items when they wrap to new lines.

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}

The justify-content Property

The justify-content property in CSS is used to describe the align of the flexible box container. It contains the space between and around content items along the main axis of a flex container is distributed in a browser.
This property cannot be used to describe items or containers along the vertical axis.

Syntax:

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

justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;

The align-items Property

The align-items property is used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis. The align-self property is used to override the align-items property.

Syntax:

.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}

align-items: stretch|center|flex-start|flex-end|baseline|initial|
inherit;