Chapter 15. CSS: Layout – Flex Box

Flex Box

Original

item 1
item 2
item 3
item 4
item 5
item 6

display: flex

item 1
item 2
item 3
item 4
item 5
item 6

flex-direction

flex-direction:row

item 1
item 2
item 3
item 4
item 5
item 6

flex-direction:row-reverse

item 1
item 2
item 3
item 4
item 5
item 6

flex-direction:column

item 1
item 2
item 3
item 4
item 5
item 6

flex-direction:column-reverse

item 1
item 2
item 3
item 4
item 5
item 6

flex-wrap

flex-wrap: nowrap

item 1
item 2
item 3
item 4
item 5
item 6
item 7

flex-wrap: no-wrap

item 1
item 2
item 3
item 4
item 5
item 6
item 7

flex-wrap: wrap-reverse

item 1
item 2
item 3
item 4
item 5
item 6
item 7

justify-content

Original Position

1
2
3

justify-content: flex-start

1
2
3

justify-content: center

1
2
3

justify-content: flex-end

1
2
3

justify-content: spece-between

1
2
3

justify-content: spece-around

1
2
3

align-items

Original Position

1
2
3

align-items: flex-start

1
2
3

align-items: center

1
2
3

align-items: flex-end

1
2
3

align-items: stretch

1
2
3

align-items: baseline

1
2
3

align-content

Original Position

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

align-content: flex-start

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

align-content: center

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

align-content: flex-end

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

align-content: stretch

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

align-content: space-between

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

align-content: space-around

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

align-self

Original Position

1
2
3

align-self: flex-start

1
2
3

align-self: center

1
2
3

align-self: flex-end

1
2
3

align-self: stretch (align-items:center) @ Parent

1
2
3

align-self: baseline (align-items:center) @ Parent

1
2
3

flex-grow

Original Flex Item Size

Grow Evenly

flex-grow: 1
flex-grow: 1
flex-grow: 1

Grow Red and Blue with the Same Ratio

flex-grow: 0
flex-grow: 1
flex-grow: 1

Grow Red and Blue with 1:2 Ratio

flex-grow: 0
flex-grow: 1
flex-grow: 2

Grow Blue Only

flex-grow: 0
flex-grow: 0
flex-grow: 1

flex-shrink

Flex Item Size with No Shrink

Shrink Evenly

flex-shrink: 1
flex-shrink: 1
flex-shrink: 1

Shrink Red and Blue with the Same Ratio

flex-shrink: 0
flex-shrink: 1
flex-shrink: 1

Shrink Red and Blue with 1:2 Ratio

flex-shrink: 0
flex-shrink: 1
flex-shrink: 2

Shrink Blue Only

flex-shrink: 0
flex-shrink: 0
flex-shrink: 1

flex-basis

Original Flex Item Size - Horizontal Layout

Horizontal Layout with flex-basis

flex-basis: 25%
flex-basis: 25%
flex-basis: 50%

Original Flex Item Size - Vertical Layout

Vertical Layout with flex-basis

flex-basis: 25%
flex-basis: 25%
flex-basis: 50%

margin: auto with Flex Box

1

2

3

4

5

6

7

8

9

  1. Original Position
  2. margin-left & right: auto
  3. margin-left: auto
  4. margin-top & bottom: auto
  5. margin: auto
  6. margin-left, top & bottom: auto
  7. margin-top: auto
  8. margin-top, left & right: auto
  9. margin-top & left: auto

Inline Flex Box

Flex Box

1
2
3
1
2
3

Inline Flex Box

1
2
3
1
2
3

Nested Flex Box

Layout 1

Layout 1 with Content in the Center

Content
Content

Layout 2

Layout 3

Back