flexで縦に並べるflex-direction: column;

See the Pen flexで縦に並べるflex-direction: column; by takapen (@takapen) on CodePen.

-aaa...
bbbbbbbbbbbbbbbb bbb



-aaa...
bbbbbbbbbbbbbbbb bbb



-aaa...
bbbbbbbbbbbbbbbb bbb



-aaa...
bbbbbbbbbbbbbbbb bbb

#flex01 {
  background: #ccc;
  display:flex;
  flex-direction: column;/* ブロック的に縦に並べる */
}

#flex02 {
  background: #cee;
  display:flex;
  flex-direction: column-reverse;/* columuの逆 */
}

#flex03 {
  background: #cce;
  display:flex;
  flex-direction: row; /*初期値 インライン的に並べる*/
}

#flex04 {
  background: #ecc;
  display:flex;
  flex-direction: row-reverse;/* rowの逆 */
}