Rows

align-items: stretch (default)

Working on Cross Axis Alignment

For row, cross axis is y-axis

CSS

.container {
  display: flex;
  height: 600px;
  align-items: stretch;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: start

CSS

.container {
  display: flex;
  height: 600px;
  align-items: start;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: end

CSS

.container {
  display: flex;
  height: 600px;
  align-items: end;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: center

CSS

.container {
  display: flex;
  height: 600px;
  align-items: center;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: baseline

CSS

.container {
  display: flex;
  height: 600px;
  align-items: baseline;
}

.box-1 {
  font-size: 45px;
}

Box-1

Box-2

Box-3

Box-4

Box-5

Columns

align-items: stretch (default)

Working on Cross Axis Alignment

For column, cross axis is x-axis

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  align-items: stretch;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: start

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  align-items: start;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: end

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  align-items: end;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: center

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  align-items: center;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-items: baseline

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 600px;
  align-items: baseline;
}

.box-1 {
  font-size: 45px;
}

Box-1

Box-2

Box-3

Box-4

Box-5

There is no difference in baseline