Hello, I'm Jean Paul Giraldo! A Software Developer by day, maker and lifelong learner by night (or very early mornings).

Go back to jeanpaulgiraldo.com

This is my personal guide to Flexbox

The Flexible Box Module, more commonly known as flexbox, was designed as a one-dimensional layout Module and a method for space distribution between items.

The main axis & the cross axis

The main axis is the axis running in the direction the flex items. are being laid out, either as rows or columns.
The cross axis runs perpendicular.

The main axis will run horizontally (and the cross axis will run vertically) when you define the flex-direction property as:
• row
• row-reverse

The main axis will run vertically (and the cross axis will run horizontally) when you define the flex-direction property as:
• column
• column-reverse

Flex container

An area of a document laid out using flexbox. To create a flex container, simply set the display property of the element to flex or flex-inline

These are the default properties
• Items display in a row (the flex-direction property's default is row).
• Items start from the start edge of the main axis.
• Items do not stretch on the main dimension, but can shrink.
• Items will stretch to fill the size of the cross axis.
• The flex-basis property is set to auto.
• The flex-wrap property is set to nowrap.

Default behavior

Properties for the parent (flex container)

display: flex (default) | inline-flex

display: flex

Like the example above

display: inline-flex

1

2

3

4

5

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

flex-direction: row

1

2

3

4

5

flex-direction: row-reverse

1

2

3

4

5

flex-direction: column

1

2

3

4

5

flex-direction: column-reverse

1

2

3

4

5

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

flex-wrap: nowrap

(default) all flex items will be on one line

1

2

3

4

5

6

7

8

flex-wrap: wrap

flex items will wrap onto multiple lines, from top to bottom

1

2

3

4

5

6

7

8

flex-wrap: wrap-reverse

flex items will wrap onto multiple lines from bottom to top

1

2

3

4

5

6

7

8

flex-flow: <flex-direction> <flex-wrap>

this is shorthand for the flex-direction and flex-wrap properties e.g. flex-flow: column wrap;

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

Defines the alignment along the main axis. There are more values for positional alignment, but they're not supported: start | end | left | right. And for overflow alignment, not supported either: safe | unsafe

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-between

1

2

3

4

justify-content: space-around

1

2

3

4

justify-content: space-evenly

1

2

3

4

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

Defines the behavior of the flex items along the cross axis

align-items: flex-start

1

2

3

4

align-items: flex-end

1

2

3

4

align-items: center

1

2

3

4

align-items: stretch

1

2

3

4

align-items: baseline

Notice the baseline of the numbers are aligned.

1

2

3

4

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

Aligns a flex container's lines within when there is extra space in the cross-axis. This property only takes effect on multi-line flexible containers.

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: space-between

1

2

3

4

5

6

7

8

align-content: space-around

1

2

3

4

5

6

7

8

align-content: stretch

1

2

3

4

5

6

7

8

Properties for the children (flex items)

order: <number>

Changes the order of the items.
Item A: order: 3
Item B: order: 1
Item C: order: 2
Notice that items with no order property (D, E) are not affected.

A

B

C

D

E

flex-grow: <number>

It accepts a unitless value that serves as a proportion. Dictates the amount of available space within the flex container the item should take up.
Item A: flex-grow: 3
Item B: flex-grow: 1
Item C: flex-grow: 2
Notice that items with no flex-grow property (D, E) are not affected.

A

B

C

D

E

flex: none | [ flex-grow flex-shrink? || flex-basis? ]

This is a shorthand for flex-grow, flex-shrink and flex-basis combined.
It's recommended to use this shorthand version instead of setting individual values.
flex-shrink and flex-basis are optional.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Overrides the default vertical alignment (or the one set by align-items in the container) for flex items.
Works exactly like align-items but for a single flex item.

Item C: has align-self: flex-start;
The rest of the items are affected by align-items: flex-start;

A

B

C

D

E