CSS

Flexbox: Alignment

Adding shorthand flex:1 to each items is indeed handy.

But what it does is only to ignore all predeclared width, and distribute the space evenly between each items. It also doesn't say anything about vertical alignment. Here is how to have more control over alignments of the flexbox.

Properties to control alignments

• justify-content: controls alignment of all items on the main axis.
• align-items: controls alignment of all items on the cross axis.
• align-self: controls an individual flex item on the cross axis.
• align-content: controls space between flex lines on the cross axis. See packing flex lines.
• gap, column-gap, and row-gap: creates gaps between flex items.

justify-content

Controls alignment of all items on the main axis

• justify-content: flex-start
  
  A

  B

  C
• justify-content: flex-end
  
  A

  B

  C
• justify-content: center
  
  A

  B

  C
• justify-content: space-between
  
  A

  B

  C
• justify-content: space-around
  
  A

  B

  C
• justify-content: space-evenly
  Since this is new, it's not well supported yet, maybe avoid using.
  A

  B

  C

If direction is reversed, of course the start and end are also flipped

• flex-direction: row-reverse;
justify-content: flex-start
  A

  B

  C

If the axis is changed, justify content is applied to the vertical space.

• flex-direction: column-reverse;
height: 300px;
justify-content: flex-start;
  A

  B

  C

margin: auto

There are no justify-items or justify-self properties. How to part the first few items to the left and the rest to the right? Using margin-left: auto on the first item pushed to the right or margin-right: auto on the previous item.

• margin-left: auto on box C
  A

  B

  C

  D

  E
• margin-right: auto on box C
  A

  B

  C

  D

  E
• margin: auto on box C
  A

  B

  C

  D

  E

align-items

Controls alignment of all items on the cross axis.

• align-items: stretch
  This is the initial value. Items height are stretched to the container's height by default, except if it has a defined height. Without declaration, container's height follows the tallest item.
  Container's height undefined:
  height: 60px

  height: 120px

  height undefined
  Container's height = 180px (as the rest in this align-items subsection)
  height: 60px

  height: 120px

  height undefined
• align-items: flex-start
  Align at the start (in our case, top)
  height: 60px

  height: 120px

  height
  undefined

  ABC
• align-items: baseline
  Align at the baseline (the bottom of the first line) of the content. Might look identical with flex-start, being on the top, when the font are all the same.
  height: 60px

  height: 120px

  height
  undefined

  ABC
• align-items: flex-end
  Align at the end (in our case, bottom)
  height: 60px

  height: 120px

  height undefined
• align-items: center
  Align at the center
  height: 60px

  height: 120px

  height undefined

align-self

Controls an individual flex item on the cross axis.

You can set align-items property on container that works for each items, or do it at individual item with align-self property. The values are the same, plus align-self: auto which reset the value to what is defined at the flex container.

Note on align-self: baseline: Items with baseline value will base-align among themselves. So if there's only 1 with such value, it will just go to the top instead.

Container below is set with align-items: center

Let's play with flex-direction on above container

For the vertical flexbox, predefined container's height is removed.

It seems like the baseline value doesn't take effect here. I have tried adding padding or margin as well to one of the item with baseline value, but it only send that box away from the left container border, but doesn't affect the other one.

align-content

Controls the distribution of space between rows in wrapped multiplt-line flex container. See packing flex lines.

Without align-content declaration:

• align-content: stretch
  align-content:

  flex-start

  flex-end

  center

  space-between

  space-around

  stretch

  space-evenly
• align-content: flex-start
  align-content:

  flex-start

  flex-end

  center

  space-between

  space-around

  stretch

  space-evenly
• align-content: flex-end
  align-content:

  flex-start

  flex-end

  center

  space-between

  space-around

  stretch

  space-evenly
• align-content: center
  align-content:

  flex-start

  flex-end

  center

  space-between

  space-around

  stretch

  space-evenly
• align-content: space-between
  align-content:

  flex-start

  flex-end

  center

  space-between

  space-around

  stretch

  space-evenly
• align-content: space-around
  align-content:

  flex-start

  flex-end

  center

  space-between

  space-around

  stretch

  space-evenly
• align-content: space-evenly Since this is new, it's not well supported yet, maybe avoid using.
  align-content:

  flex-start

  flex-end

  center

  space-between

  space-around

  stretch

  space-evenly

gap

The flex container below is set to:

• flex-wrap: wrap;
justify-content: center;
align-content: center;

To create gap between flex items:

• column-gap
  Creates gaps between items on the main axis.
  A

  B

  C

  D

  E

  F

  G

  H

  I

  J
• row-gap
  Creates gaps between flex lines when using flex-wrap: wrap.
  A

  B

  C

  D

  E

  F

  G

  H

  I

  J
• gap
  Shorthand of column-gap and row-gap.
  A

  B

  C

  D

  E

  F

  G

  H

  I

  J