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 Default value
flex-direction row
justify-content flex-start
align-items stretch
flex-wrap nowrap
align-content stretch

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

Widths of flex items adjust in order to fit flex elements along parent element width.

1
2
3
4

Example 2

Widths of flex items adjust respectively in order to fit along parent element width. 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;
}
1
2
3
4

The CSS properties used with flex container:

flex-direction

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

flex-start (default)

Flex direction row and justify content flex-start

flex-end

Flex justify content - flex end

center

Flex justify content - center

space-between

Flex justify content - space between

space-around

Flex justify content - space around

align-items

stretch (default)

Flex align items - stretch

flex-start

Flex align items - flex start

flex-end

Flex align items - flex end

center

Flex aling items - center

baseline

Flex align items - baseline

flex-wrap

nowrap (default)

Flex wrap - nowrap

wrap

Flex wrap - wrap

wrap-reverse

Flex wrap - wrap reverse

align-content

stretch (default)

Flex align content - stretch

flex-start

Flex align content - flex start

flex-end

Flex align content - flex end.

center

Flex align content - center

space-between

Flex align content - space between

space-around

Flex align content - space around

The CSS properties used with flex items:

order

Example 1

flex-order

.flex-item-3 {
order: -1
}
Example 2

Flex order

.flex-item-1 {order: 3;}
.flex-item-2 {order: 4;}
.flex-item-3 {order: 2;}
.flex-item-4 {order: 1;}

align-self

Flex align self

.flex-container {
    display: flex;
    align-content:center;
}
.flex-item-1 { align-self: flex-start;}
.flex-item-2 { align-self: flex-end;}
.flex-item-3 { align-self: center;}
.flex-item-4 { align-self: baseline;}
.flex-item-5 { align-self: stretch;}

flex

Flex flex

.flex-item-1 { flex: 1; }
.flex-item-2 { flex: 2; }
.flex-item-3 { flex: 1; }

The shorthands

flex-flow

Resource

Posted in CSS