CSS flex

CSS flexbox
CSS Flexible Layout Box, popularly known as Flexbox is a powerful one-dimensional layout model. It helps to lay, align and distribute items (children) efficiently inside a container (parent).

Flexbox Architecture:

There are two aspects of a Flexbox: Flex container and Flex item

The flex items can be laid out either along the main axis (starting from the main start and ending at the main end) or along the cross axis (starting from the cross start and ending at the cross end).

Main axis: Flex items are laid out along this axis, either horizontally or vertically based upon the flex-direction.
Cross axis: It is perpendicular to the main axis and its direction depends on the direction of the main axis.

The CSS Flex Container
This is a flex container (the blue area) with three flex items:

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

Example

.flex-container {
display: flex;
}

The CSS properties we use for the flex container are:

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

The CSS flex-direction Property
The *flex-direction * property specifies the display-direction of flex items in the flex container.

The flex-direction property can have one of the following values:

• row
• column
• row-reverse
• column-reverse

Example

The row value is the default value, and it displays the flex items horizontally (from left to right):

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

Result:

Example

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

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

Result:

Example

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

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

Result:

Example

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

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

Result:

The CSS flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

The flex-wrap property can have one of the following values:

• nowrap
• wrap
• wrap-reverse

Example

The nowrap value specifies that the flex items will not wrap (this is default):

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

Result:

Example

The wrap value specifies that the flex items will wrap if necessary:

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

Result:

Example

The wrap-reverse value specifies that the flex items will wrap if necessary, in reverse order:

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

Result:

The CSS flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction **and **flex-wrap properties.

Example
.flex-container {
display: flex;
flex-flow: row wrap;
}

The CSS justify-content Property

The justify-content property is used to align the flex items when they do not use all available space on the main-axis (horizontally).

The justify-content property can have one of the following values:

• center
• flex-start
• flex-end
• space-around
• space-between
• space-evenly

Example

The center value positions the flex items in the center of the container:

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

Result:

Example

The flex-start value positions the flex items at the beginning of the container (this is default):

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

Result:

Example

The flex-end value positions the flex items at the end of the container:

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

Result:

Example

The **space-around **value displays the flex items with space around them:

.flex-container {
display: flex;
justify-content: space-around;
}

Result:

Example

The space-between value displays the flex items with space between them:

.flex-container {
display: flex;
justify-content: space-between;
}

Result:

Example

The space-evenly value displays the flex items with equal space around them:

.flex-container {
display: flex;
justify-content: space-evenly;
}

Result:

The CSS align-items Property

The align-items property is used to align the flex items when they do not use all available space on the cross-axis (vertically).

The align-items property can have one of the following values:

• center
• flex-start
• flex-end
• stretch
• baseline
• normal

Example

The center value positions the flex items in the middle of the container:

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

Result:

Example

The flex-start value positions the flex items at the top of the container:

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

Result:

Example

The flex-end value positions the flex items at the bottom of the container:

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

Result:

Example

The stretch value stretches the flex items to fill the container (this is equal to "normal" which is default):

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

Result:

Example

The baseline value positions the flex items at the baseline of the container:

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

The CSS Flex Items Properties

The following table lists all the CSS Flex Items properties: