CodeTea.io
Flexbox in a vertical view (column)

Flexbox in a vertical view (column)

In a vertical view (flex direction column), justifyContent positions children along the vertical axis (flex-start, center, flex-end, space-between, space-around) and alignItems positions them along the horizontal axis (flex-start, center, flex-end).

1. JustifyContent: flex-start

Flexbox in a vertical view (column) – JustifyContent: flex-start: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button JustifyContent: flex-start

2. JustifyContent: center

Flexbox in a vertical view (column) – JustifyContent: center: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button JustifyContent: center

3. JustifyContent: flex-end

Flexbox in a vertical view (column) – JustifyContent: flex-end: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button JustifyContent: flex-end

4. JustifyContent: space-between

Flexbox in a vertical view (column) – JustifyContent: space-between: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button JustifyContent: space-between

5. JustifyContent: space-around

Flexbox in a vertical view (column) – JustifyContent: space-around: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button JustifyContent: space-around

6. AlignItems: flex-start

Flexbox in a vertical view (column) – AlignItems: flex-start: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button AlignItems: flex-start

7. AlignItems: center

Flexbox in a vertical view (column) – AlignItems: center: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button AlignItems: center

8. AlignItems: flex-end

Flexbox in a vertical view (column) – AlignItems: flex-end: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Click button FlexDirection: column
  2. Click button AlignItems: flex-end