CSS Flexible Box Layout Module

1

2

3

4

5

6

7

8

Flexbox Layout

Before the Flexible Box Layout Module, 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 having to use floats or positioning.

Flexbox Elements

A flexbox layout consists of a parent element, with one or more child elements.

1

2

3

The element above represents a container (the blue area) with three items.

Example

A container with three items:

Parent Element (Container)

The parent element becomes flexible by setting the display property to flex:

Example

.flex-container {
display: flex;}

Flexbox properties for the parent element:

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

flex-direction:

Legal Values:

column
column-reverse
row (default)
row-reverse

The flex-direction property defines in which direction the container wants to stack the items.

1

2

3

Example

Use the column value to stack the items in a column from top to bottom:

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

Example

Use the column-reverse value to stack the items in a column from bottom to top:

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

Example

Use the row value to stack the items in a row from left to right:

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

Example

Use the row-reverse value to stack the items in a row from right to left:

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

flex-wrap:

Legal Values:

nowrap (default)
wrap
wrap-reverse

The flex-wrap property defines if, and how, the container wants its children to wrap.
The examples below have 12 items, to better demonstrate the flex-wrap property.

1

2

3

4

5

6

7

8

9

10

11

12

Example

Use the wrap value to display items in multiple rows:

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

Example

Use the nowrap value to display all items in one row:

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

Example

Use the wrap-reverse value to display items in multiple rows, starting from the bottom:

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

flex-flow:

Legal Values:

flex-direction flex-wrap

Default Value: row nowrap

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;}

justify-content:

Legal Values:

center
flex-start (default)
flex-end
space-around
space-between

The justify-content property aligns the items:

1

2

3

Example

Use center to align the items in the center of the container:

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

Example

Use flex-start to align the items at the beginning of the container:

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

Example

Use flex-end to align the items at the end of the container:

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

Example

Use space-around to display the items with equal spacing around them:

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

Example

Use space-between to display the items with equal spacing between them:

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

align-items:

Legal Values:

baseline
center
flex-start
flex-end
stretch (default)

The align-items property aligns the items vertically (the opposite axis of the justify-content property).

1

2

3

The examples below have a 200 pixels high container, to better demonstrate the align-items property.

Example

Use center to center align the items:

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

Example

Use flex-start to align the items at the start of the container:

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

Example

Use flex-end to align the items at the end of the container:

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

Example

Use stretch to stretch the items from the start to the end of the container:

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

Example

Use baseline to align the items by their baseline:

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

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

1

2

3

align-content:

Legal Values:

center
flex-start
flex-end
space-around
space-between
stretch (default)

The align-content property aligns the item rows.

1

2

3

4

5

6

7

8

9

10

11

12

The examples below have a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Example

Use space-between to display the rows with equal spacing between them:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;}

Example

Use space-around to display the rows with equal spacing around them:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;}

Example

Use stretch to display the items stretched in the entire row:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;}

Example

Use center to display the rows in the middle of the container:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;}

Example

Use flex-start to display the rows at the beginning of the container:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;}

Example

Use flex-end to display the rows at the end of the container:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;}

Perfect Centering

In the following example we will solve an almost daily problem: perfect centering.

Set both the justify-content and align-items properties to center, and the item will be perfectly centered in both axis:

Example

.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;}

Child Elements (Items)

The direct child element(s) of a flexible container automatically becomes flexible items.

1

2

3

4

The element above represents four blue flexible items inside a grey flexible container.

Example

The direct children of a flexible container becomes flexible items:

Flexbox properties for the child elements:

order:

Legal Values:

Integer
Default: 0

The order property sorts the items in the specified order.

1

2

3

4

The first item in the HTML code does not have to appear as the first item in the layout:

Example

Use the order property to change the order of the flexible items

flex-grow:

Legal Values:

Number
Default: 0

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

1

2

3

Example

Make the third item grow eight times faster than the rest:

flex-shrink:

Legal Values:

Number
Default: 1

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

1

2

3

4

5

6

7

8

9

10

Example

Do not let the third item shrink as easy as the rest:

flex-basis:

Legal Values:

any legal width, or content
Default: auto

The flex-basis property specifies the width of a flex item.

1

2

3

4

Example

Specify the width of the third item:

flex:

Legal Values:

flex-grow flex-shrink flex-basis
Default: 0 1 auto

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

Example

Make the third element not grow able, but shrinkable, and preferably 200px wide:

align-self:

Legal Values:

auto (default)
baseline
center
flex-start
flex-end
stretch

The align-self property overrides the default alignment set by the container's align-items property.

1

2

3

4

The container in the examples below has a 200 pixels height, to better demonstrate the align-self property:

Example

Align the third item in the middle:

Example

Align the second item at the beginning, and the third item at the end of the container:

Browser Support

The flexbox properties are supported in all modern browsers.


29.0	11.0	22.0	10	48

CSS3 Flexbox Properties

The following table lists the CSS properties used with flexbox:

Property	Description
display	Specifies the type of box used for an HTML element
flex-direction	Specifies the direction of the flexible items inside a flex container
justify-content	Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items	Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap	Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow	A shorthand property for flex-direction and flex-wrap
order	Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self	Used on flex items. Overrides the container's align-items property
flex	Specifies the length of a flex item, relative to the rest of the flex items inside the same container

label name

PHP

CSS Flexible Box

ttest

RRelted