CSS Introduction | CSS3 Extensions | Flexible Box Layout

Flexible Box Layout

Flexible box, also called flex box, is a layout model first introduced in CSS3. This layout allows HTML elements to be automatically rearranged on screens and devices of different sizes, helping the web page layout remain consistent.

The properties provided for flex box are as follows.

The properties provided for flex items are as follows.

CSS3 Flex Box Support Versions

The major web browser versions that support CSS3 flex box are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

Concept of Flex Box

Flex box consists of a flex container and flex items.

A flex container can be defined by setting the display property of the corresponding HTML element. To define the element as a block type, set the display property value to flex; to define it as an inline type, set it to inline-flex. A flex container must always contain one or more flex items.

Everything outside the flex container and inside the flex items behaves as usual. Flex box only defines how flex items are positioned inside the flex container.

Flex items are positioned inside the flex container along an imaginary line called a flex line. By default, a single flex container has only one flex line.

<style>
    #flex { display: -webkit-flex; display: flex; }
</style>

You can also change the direction of this flex line by using the direction property. When the direction property value is set to rtl (right-to-left), all text elements on the page are written from right to left. At the same time, the direction of the flex line also changes, so the alignment of flex items changes from right to left.

<style>
    body { direction: rtl; }
    #flex { display: -webkit-flex; display: flex; }
</style>

flex-direction Property

The flex-direction property sets the direction in which flex items are placed inside the flex container. This property can have the following values.

1. row : The default. Flex items are placed from left to right and from top to bottom.
2. row-reverse : If the direction property value is ltr (left-to-right), flex items are placed in reverse, from right to left.
3. column : If the writing mode is horizontal, flex items are placed vertically from top to bottom.
4. column-reverse : If the writing mode is horizontal, flex items are placed vertically from bottom to top.

The following example uses the row and row-reverse values of the flex-direction property.

<style>
    #row_reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
</style>

The following example uses the column and column-reverse values of the flex-direction property.

<style>
    #column { -webkit-flex-direction: column; flex-direction: column; }
    #column_reverse { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
</style>

justify-content Property

The justify-content property sets the horizontal alignment method of flex items. This property can have the following values.

1. flex-start : The default. Flex items are placed from the front of the flex container.
2. flex-end : Flex items are placed from the back of the flex container.
3. center : Flex items are placed from the center of the flex container.
4. space-between : Flex items are placed with free space only between the items.
5. space-around : Flex items are placed with free space before, after, and between the items.

<style>
    #row_reverse { -webkit-justify-content: flex-end; justify-content: flex-end; }
</style>

<style>
    #center { -webkit-justify-content: center; justify-content: center; }
    #between { -webkit-justify-content: space-between; justify-content: space-between; }
    #around { -webkit-justify-content: space-around; justify-content: space-around; }
</style>

align-items Property

The align-items property sets the vertical alignment method of flex items. This property has no effect in a flex box with only one line, and works only in a flex box with two or more lines. This property can have the following values.

1. stretch : The default. Flex items are arranged after their height is changed to match the height of the flex container.
2. flex-start : Flex items are placed at the top of the flex container.
3. flex-end : Flex items are placed at the bottom of the flex container.
4. center : Flex items are placed in the center of the flex container.
5. baseline : Flex items are placed on the baseline of the flex container.

<style>
    #start { -webkit-align-items: flex-start; align-items: flex-start; }
    #center { -webkit-align-items: center; align-items: center; }
    #end { -webkit-align-items: flex-end; align-items: flex-end; }
</style>

<style>
    #stretch { -webkit-align-items: stretch; align-items: stretch; }
    #base { -webkit-align-items: baseline; align-items: baseline; }
</style>

flex-wrap Property

The flex-wrap property sets whether flex items move to the next line when there is no more free space on the flex line. This property can have the following values.

1. nowrap : The default. Flex items do not move to the next line. Instead, the widths of flex items are reduced so all items fit on one line.
2. wrap : If there is no free space, flex items move to the next line.
3. wrap-reverse : If there is no free space, flex items move to the next line, but upward instead of downward.

<style>
    #wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
    #wrap_reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
</style>

align-content Property

The align-content property can change the behavior of the flex-wrap property. This property behaves similarly to align-items, but aligns flex lines instead of flex items. This property can have the following values.

1. stretch : The default. Flex lines take up all remaining space.
2. flex-start : Flex lines are packed toward the front of the flex container.
3. flex-end : Flex lines are packed toward the back of the flex container.
4. center : Flex lines are packed in the center of the flex container.
5. space-between : Flex lines are evenly distributed in the flex container.
6. space-around : Flex lines are evenly distributed in the flex container, with a little space left at both ends.

<style>
    #space_between { -webkit-align-content: space-between; align-content: space-between; }
    #space_around { -webkit-align-content: space-around; align-content: space-around; }
</style>

<style>
    #flex_start { -webkit-align-content: flex-start; align-content: flex-start; }
    #center { -webkit-align-content: center; align-content: center; }
    #flex_end { -webkit-align-content: flex-end; align-content: flex-end; }
</style>

order Property of Flex Items

The order property sets the order of flex items inside the flex container.

<style>
    #first { -webkit-order: -1; order: -1; }
</style>

margin Property of Flex Items

When the margin property value is set to auto, the free space in the horizontal direction can be removed. Using this property, you can push flex items away from each other in opposite directions.

<style>
    #first .item:nth-child(1) { margin-right: auto; }
    #second .item:nth-child(2) { margin-right: auto; }
</style>

You can also use the margin property to easily center items both vertically and horizontally.

<style>
    .item { width: 80px; height: 50px; margin: auto; }
</style>

align-self Property of Flex Items

The align-self property takes precedence over the align-items property of the flex container. Using this property, you can set different align property values for each flex item.

<style>
    .item:nth-child(2) { -webkit-align-self: flex-start; align-self: flex-start; }
    .item:nth-child(3) { -webkit-align-self: flex-end; align-self: flex-end; }
    .item:nth-child(4) { -webkit-align-self: center; align-self: center; }
    .item:nth-child(5) { -webkit-align-self: baseline; align-self: baseline; }
</style>

flex Property of Flex Items

Using the flex property, you can set the width of flex items in the same flex container relatively.

In the following example, the first flex item takes up 3/5 of the total width, and the other two items each take up 1/5 of the total width.

<style>
    .item:nth-child(1) { -webkit-flex: 3; flex: 3; }
    .item:nth-child(2) { -webkit-flex: 1; flex: 1; }
    .item:nth-child(3) { -webkit-flex: 1; flex: 1; }
</style>