Flexbox Playground
（Flexbox CSS自動生成ツール）

① プロパティをクリック
② プレビューで確認
③ コードをコピー

---

flex-direction：子要素の並ぶ向き（横・縦）

左から右に配置　※default※
flex-direction: row;

右から左に配置
flex-direction: row-reverse;

上から下に配置
flex-direction: column;

下から上に配置
flex-direction: column-reverse;

---

flex-wrap：子要素の折り返し

折り返しなし　※default※
flex-wrap: nowrap;

折り返しあり（上から下）
flex-wrap: wrap;

折り返しあり（下から上）
flex-wrap: wrap-reverse;

---

justify-content：水平↔方向の揃え

左揃え　※default※
justify-content: flex-start;

右揃え
justify-content: flex-end;

中央揃え
justify-content: center;

両端＋均等配置
justify-content: space-between;

均等配置（余白あり）
justify-content: space-around;

---

align-items：垂直↕方向の揃え

伸ばす
align-items: stretch;

上揃え
align-items: flex-start;

下揃え
align-items: flex-end;

中央揃え（縦）
align-items: center;

ベースライン
align-items: baseline;

---

align-content：複数行の揃え（行間）

伸ばす
align-content: stretch;

上揃え
align-content: flex-start;

下揃え
align-content: flex-end;

中央揃え
align-content: center;

上下均等配置
align-content: space-between;

上下均等（余白あり）
align-content: space-around;