CSS Flexbox Guide

Parent Container

The white box is the parent container

child 1
child 2
child 3

Childs of parent container

The little violet boxes are the childs

child 1
child 2
child 3

display::property

Define an element as flexbox container

.box {

display: flex; /* you can also display: inline-flex; */

}

child 1
child 2
child 3

order::property

Defines order of childs

.box-item1 {

order: 3;

}

child 1
child 2
child 3

.box-item3 {

order: -1;

}

child 1
child 2
child 3

flex-direction::property

Defines direction of elements within container

.box {

flex-direction: column; /* you can also flex-direction: column-reverse; */

}

child 1
child 2
child 3

.box {

flex-direction: row-reverse; /* you can also flex-direction: row; */

}

child 1
child 2
child 3

flex-grow::property

Defines width of childs

.box-item1 {

flex-grow: 2;

}

child 1
child 2
child 3

flex-flow::property

Defines direction of elements within container

.box {

flex-flow: column; /* you can also flex-flow: column-reverse; */

}

child 1
child 2
child 3

.box {

flex-flow: row-reverse; /* you can also flex-flow: row; */

}

child 1
child 2
child 3

flex-shrink::property

Defines width of single childs

.box-item1 {

flex-shrink: 2;

}

1
2
3

flex-wrap::property

Defines wrap settings of elements within container

.box {

flex-wrap: wrap; /* you can also flex-wrap: nowrap; */

}

child 1
child 2
child 3

.box {

flex-wrap: wrap-reverse;

}

child 1
child 2
child 3

flex-basis::property

Defines initial width of single flex-child

.box-item1 {

flex-basis: 50px;

}

1
2
3

.box-item1 {

width: 50px;

flex-basis: auto; /* auto use the width value */

}

1
2
3

justify-content::property

Defines alignment of elements within container

.box {

justify-content: flex-end; /* flex-start or center are other possibilities */

}

child 1
child 2
child 3

.box {

justify-content: space-around;

}

child 1
child 2
child 3

.box {

justify-content: space-between;

}

child 1
child 2
child 3

align-self::property

Defines and overrides alignment of single flex-child

.box-item1 {

align-self: center; /* you can use also align-self: baseline or stretch; */

}

1
2
3

.box-item3 {

align-self: flex-end; /* you can use also align-self: flex-start; */

}

1
2
3

align-items::property

Defines alignment of elements within container

.box {

align-items: flex-end; /* flex-start, baseline, stretch or center are other possibilities */

}

child 1
child 2
child 3

.box {

align-items: center;

}

child 1
child 2
child 3

align-content::property

Defines alignment of elements within container

.box {

align-content: flex-end; /* flex-start, stretch, space-between, space-around or center are other possibilities */

}

1
2
3
4
5

.box {

align-content: space-between;

}

1
2
3
4
5

.box {

align-content: space-around;

}

1
2
3
4
5

Collection Overview