Flexbox

List of FLEX CONTAINER properties

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

List of FLEX ITEM properties

order

flex-grow

flex-shrink

flex-basis

flex

align-self



FLEX CONTAINER examples

flex-direction

DEFAULT flex-direction: row

flex-direction: row (default) | column | row-reverse | column-reverse

Example

flex-direction: row (default)

1
2
3
4

flex-direction: column

1
2
3
4

flex-direction: row-reverse

1
2
3
4

flex-direction: column-reverse

1
2
3
4

 ....Code goes here....

flex-wrap

DEFAULT flex-wrap: nowrap

flex-wrap: nowrap (default) | wrap-reverse

Example

flex-wrap: wrap

1
2
3
4
5
6
7
8

flex-wrap: wrap-reverse

1
2
3
4
5
6
7
8

 ....Code goes here....

flex-flow

This is shorthand for FLEX DIRECTION and FLEX WRAP

Example

Example goes here

 ....Code goes here....

justify-content

DEFAULT justify-content: flex-start

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

Example

justify-content: flex-start

1
2
3
4

justify-content: flex-end

1
2
3
4

justify-content: center

1
2
3
4

justify-content: space-around

Items are positioned with space before, between, and after the lines
1
2
3
4

justify-content: space-between

Items are positioned with space between the lines
1
2
3
4

 ....Code goes here....

align-items

The align-items property is used to align the flex items VERTICALLY.
It focuses on the CROSS AXIS NOTE: Remember this all reverses as main-axis becomes (vertical) and cross-axis becomes (horizontal) if you set flex-direction:column

DEFAULT align-items: stretch

align-items: stretch (default) | flex-start | flex-end | center | baseline

Example

align-items: stretch

1
2
3
4

align-items: flex-start

1
2
3
4

align-items: flex-end

1
2
3
4

align-items: flex-center

1
2
3
4

align-items: baseline

1
2
3
4

Super center tip!

Using justify-content (Main Axis) and align-items (cross Axis) you can center items perfectly horizontally and vertical.

I'm in the center

 ....Code goes here....

align-content

DEFAULT align-content: stretch

align-items: stretch (default) | flex-start | flex-end | center | space-around | space-between

Example

align-content: flex-start

1
2
3
4
5
6
7
8

align-content: flex-end

1
2
3
4
5
6
7
8

align-content: center

1
2
3
4
5
6
7
8

align-content: stretch

1
2
3
4
5
6
7
8

align-content: space-between

1
2
3
4
5
6
7
8

align-content: space-around

1
2
3
4
5
6
7
8

 ....Code goes here....

FLEX ITEM examples

The direct childelements of a flex container automatically becomes flexible (flex) items.

order

The order value must be a number, default value is 0.

DEFAULT order: 0

order: any number from 0

Example

order: number

#example-order #flex-item-1 {
order:4;
background:red;
color:#fff;
}

1
2
3
4

 ....Code goes here....

flex-grow

Example

With flex-grow if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.

DEFAULT flex-grow: 0

flex-grow: any number from 0

Example

flex-grow: number

#example-flex-grow #flex-item-1 {
flex-grow:2;
background:red;
color:#fff;

/*Im re-flexing the item so we can center numbers! */
display:flex;
align-items:center;
justify-content:center;
}

1
2
3
4

 ....Code goes here....

flex-shrink

DEFAULT flex-shrink: 0

flex-shrink: any number from 0

Example

flex-shrink: number

1
2
3
4

 ....Code goes here....

flex-basis

Sets the initial length of the flex item

Example

DEFAULT flex-basis: auto (if not set and flexbox items will FILL the space of the container UNLESS you set the flex items to AUTO width (

flex-basis: any number from 0 - other items FLEX to fill the space of the container

Example

flex-basis: number

#example-flex-basis #flex-item-2{
flex-basis :100px;
background:red;
color:#fff;
}
1
2 (100px)
3
4

 ....Code goes here....

flex

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

Example

#example-flex-flex #flex-item-3{
flex:0 0 300px;
}
1
2
3 (300px)
4

 ....Code goes here....

align-self

This actually OVERIDES the parent flex container's ALIGN-ITEMS align-self: stretch (default) | flex-start | flex-end | center | baseline

DEFAULT auto/p>

Example

1 (flex-start)
2 (center)
3 (flex-end)
4 (stretch)
5 (baseline)

 ....Code goes here....