CSS Flexible Box Layout

The layout for the flexbox:

Flexbox layout

Syntax:

The CSS rule for the flex container – the parent of the flex items:

.flex-container {
    display: flex | inline-flex;
}

CSS properties used with the flex container:

Property	Initial value
flex-direction	row	Use to set items on desirable axis and direction (normal or reversed).
justify-content	flex-start	Use to align items on the main axis.
align-items	stretch	Use to align items on the cross axis.
flex-wrap	nowrap	Use to force items onto one line or to wrap onto multiple line.
align-content	stretch	Use to set the distribiution of space between and around items along a flexbox’s corss axis.

Examples for default values of CSS flexbox properties:

.flex-container {
    display: -webkit-flex;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
}

Example 1

.flex-container-1 {
	width:75%;
}
.flex-container-1 .flex-item {
	width:200px;
	height:100px;
	margin:1em;
}

The size of flex items adapts to the size of their parent.

Example 2

The combined size of flex items is bigger than the size of their parent. The size of flex items shrinks accordingly to match their parent. In this example width of the every flex item is equal 93px.

.flex-container-2 {
	width:500px;
}
.flex-container-2 .flex-item {
	width:200px;
	height:100px;
	margin:1em;
}

The CSS properties used with flex items

Property	Initial value
order	0
align-self	auto
flex-basis	auto
flex-grow	0
flex-shrink	1

The CSS properties used with the flex container:

flex-direction

Use to set items on desirable axis and direction (normal or reversed).

Values:

row | row-reverse | column | column-reverse

row
Flex direction row

row-reverse
Flex direction row reverse

column
Flex direction column

column-reverse
Flex direction column reverse

justify-content

Use to align items on the main axis (horizontally – if direction is set on row).

justify-content property is applied to the flex-items after margins and flex-grow values are calculated. If any flex-item has flex-grow property grater than 0 or has an auto margin on the main axis justify-content has no effect.

flex-start (default)

Flex direction row and justify content flex-start

flex-end

Flex justify content - flex end