CSS3 Flex Box

Flex Box is a new layout mode in CSS3.

CSS3 Flex Box (Flexible Box or flexbox) is a layout method that ensures elements behave appropriately when the page needs to adapt to different screen sizes and device types.

The purpose of introducing the Flex Box layout model is to provide a more efficient way to arrange, align, and distribute space among items in a container.

Browser Support

The numbers in the table indicate the first browser version that supports the property.

The -webkit- or -moz- following the number is the prefix for the specified browser.

Property
Basic support <br>(single-line flexbox)	29.0 <br>21.0 -webkit-	11.0	22.0 <br>18.0 -moz-	6.1 -webkit-	12.1 -webkit-
Multi-line flexbox	29.0 <br>21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 <br>15.0 -webkit- <br>12.1

CSS3 Flex Box Content

A Flex Box consists of a Flex container and Flex items.

A Flex container is defined by setting the display property to flex or inline-flex.

The Flex container contains one or more Flex items.

Note: Normal rendering occurs outside the Flex container and inside the Flex items. The Flex Box only defines how Flex items are laid out within the Flex container.

Flex items are typically displayed in a single row within the Flex Box. By default, each container has only one row.

The following example shows Flex items displayed in a single row, from left to right:

Example

<!DOCTYPE html>
<html>
<head>
<style>.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>

</body>
</html>

We can also modify the arrangement.

If we set the direction property to rtl (right-to-left), the arrangement of Flex items will change, and the page layout will follow:

Example

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

flex-direction

The flex-direction property specifies the direction of the Flex items in the container.

Syntax

flex-direction: row | row-reverse | column | column-reverse

The values for flex-direction are:

row: Horizontal left-to-right arrangement (left alignment), the default arrangement.
row-reverse: Reversed horizontal arrangement (right alignment, items arranged from last to first).
column: Vertical arrangement.
column-reverse: Reversed vertical arrangement, items arranged from last to first, with the last item at the top.

The following example demonstrates the use of row-reverse:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.flex-container {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates the use of column:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates the use of column-reverse:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

justify-content Property

The justify-content property is applied to flex containers and aligns flex items along the main axis of the flex container.

The syntax for justify-content is as follows:

justify-content: flex-start | flex-end | center | space-between | space-around

Explanation of values:

flex-start:

Flex items are packed toward the start of the line. This is the default. The main-start margin edge of the first flex item is placed on the start edge of the line, and subsequent flex items are placed next to each other.
flex-end:

Flex items are packed toward the end of the line. The main-end margin edge of the first flex item is placed on the end edge of the line, and subsequent flex items are placed next to each other.
center:

Flex items are centered along the line. If the remaining free space is negative, the flex items will overflow in both directions.
space-between:

Flex items are evenly distributed in the line. If the remaining space is negative or there is only one flex item, this value is identical to flex-start. Otherwise, the first flex item's margin edge is aligned with the start edge of the line, and the last flex item's margin edge is aligned with the end edge of the line, with equal spacing between the flex items.
space-around:

Flex items are evenly distributed in the line with equal space around them. If the remaining space is negative or there is only one flex item, this value is identical to center. Otherwise, flex items are distributed with equal spacing between them (e.g., 20px), and there is half of that spacing (1/2*20px=10px) on both ends of the flex container.

Visual representation:

The following example demonstrates the use of flex-end:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates the use of center:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates the use of space-between:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

This is an example of using space-around:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

align-items Property

The align-items property sets or retrieves the alignment of flexbox elements along the cross axis (vertical axis).

Syntax

align-items: flex-start | flex-end | center | baseline | stretch

Value explanations:

flex-start: The cross-start margin edge of the flexbox elements is flushed with the cross-start edge of the line.
flex-end: The cross-start margin edge of the flexbox elements is flushed with the cross-end edge of the line.
center: The flexbox elements are centered within the line on the cross axis.
baseline: If the flexbox elements' inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment.
stretch: If the cross-size property of the flexbox elements is 'auto', it stretches to fill the line while respecting 'min/max-width/height' constraints.

Example of using stretch (default):

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Example of using flex-start:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Example of using flex-end:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Example of using center:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Example of using baseline:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

flex-wrap Property

The flex-wrap property specifies the wrapping of flexbox child elements.

Syntax

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Value explanations:

nowrap - Default,
wrap -
wrap-reverse -
initial -
inherit - Flex containers are single-line by default. In this case, flex items may overflow the container.
wrap - Flex containers are multi-line. In this case, overflow flex items are placed on a new line, and line breaks occur within the items.
wrap-reverse - Reverses the wrap arrangement.

The following example demonstrates the use of nowrap:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates the use of wrap:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

The following example demonstrates the use of wrap-reverse:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

align-content Property

The align-content property modifies the behavior of the flex-wrap property. Similar to align-items, but instead of aligning flex items, it aligns the rows.

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Value explanations:

stretch - Default. Rows will stretch to take up the remaining space.
flex-start - Rows stack at the start of the flex container.
flex-end - Rows stack at the end of the flex container.
center - Rows stack at the center of the flex container.
space-between - Rows are evenly distributed in the flex container.
space-around - Rows are evenly distributed in the flex container with half-size spaces on either end.

The following example demonstrates the use of center:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

Flex Item Properties

Ordering

Syntax

order:

Value explanations:

<integer>: Defines the order of the items. Items with a smaller value are displayed first. Can be negative.

The order property sets the order of flex items within a flex container:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

Alignment

Setting the margin value to auto will automatically take up the remaining space in the flex container. Setting the vertical margin to auto can center the flex items both vertically and horizontally.

The following example sets margin-right: auto; on the first flex item. It places the remaining space on the right side of the element:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

margin-right: auto;
}

Perfect Centering

The following example will perfectly solve the centering issues we often encounter.

Using flexbox, centering becomes simple. Just set margin: auto; to center flex items along both main and cross axes:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

align-self

The align-self property is used to set the alignment of individual flex items along the cross axis (vertical axis).

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch

Value explanations:

auto: If 'align-self' is set to 'auto', its computed value is the 'align-items' value of the parent element, or 'stretch' if it has no parent.
flex-start: The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
flex-end: The cross-start margin edge of the flex item is flushed with the cross-end edge of the line.
center: The flex item is centered within the line on the cross axis.
baseline: If the flex item's inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment.
stretch: If the cross size property of the flex item is 'auto', it stretches to fill the line while respecting 'min/max-width/height'.

The following example demonstrates the effects of different align-self values on flex items:

Example

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

flex

The flex property specifies how a flex item will grow or shrink to fit the space available in its flex container.

Syntax

flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Value explanations:

auto: Computed value is 1 1 auto.
initial: Computed value is 0 1 auto.
none: Computed value is 0 0 auto.
inherit: Inherits from the parent element.
[ flex-grow ]: Defines the flex grow factor of the flex item.
[ flex-shrink ]: Defines the flex shrink factor of the flex item.
[ flex-basis ]: Defines the default size of the flex item.

In the following example, the first flex item occupies 2/4 of the space, while the other two each occupy 1/4 of the space:

Example

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

More Examples

Creating a Responsive Page with Flexbox

CSS3 Flexbox Properties

The table below lists the commonly used properties in flexbox:

Property	Description
display	Specifies the type of box used for an HTML element.
flex-direction	Specifies the arrangement of child elements in a flex container.
justify-content	Sets the alignment of flexbox elements along the main axis (horizontal).
align-items	Sets the alignment of flexbox elements along the cross axis (vertical).
flex-wrap	Sets whether flexbox child elements should wrap when they exceed the parent container.
align-content	Modifies the behavior of the flex-wrap property, similar to align-items but for row alignment instead of individual element alignment.
flex-flow	Shorthand for flex-direction and flex-wrap.
order	Sets the order of arrangement for child elements in a flexbox.
align-self	Used on flex child elements to override the align-items property of the container.
flex	Sets how flexbox child elements are to be distributed in space.

❮ Css3 Backgrounds Home ❯