FlexBox チートシート

Flex Box

今回はFlexBoxについて取り扱う．
これさえ分かれば，画面の二段組も簡単に！

昔の書き方だとtableを使い，無理やり二段組みをしていたけど，今回でその古臭い書き方はやめよう！

親要素に指定(デフォ：横並び)

display: flex;

親に指定するプロパティ

並ぶ向き

/* 左から右(デフォ) */
flex-direction: row;
/* 右から左 */
flex-direction: row-reverse;
/* 上から下 */
flex-direction: column;
/* 下から上 */
flex-direction: column-reverse;

折り返し

/* なし(デフォ) */
flex-wrap: nowrap;
/* 右端から左下 */
flex-wrap: wrap;
/* 右端から左上 */
flex-wrap: wrap-reverse;

同時使用

/* 左から右，折り返さず(デフォ) */
flex-flow: row nowrap

水平方向の揃え

/* 左揃え(デフォ) */
justify-content: flex-start;
/* 右揃え */
justify-content: flex-end;
/* 中央ぞろえ */
justify-content: center;
/* 間の等間隔 */
justify-content: space-between;
/* 等間隔 */
justify-content: space-around;

垂直方向の揃え

/* 伸ばす */
align-items: stretch;
/* 頭揃え */
align-items: flex-start;
/* けつ揃え */
align-items: flex-end;
/* 中央 */
align-items: center;
/* 文字位置ぞろえ */
align-items: baseline;

複数行にした時の揃え

/* 伸ばす */
align-content: stretch;
/* 頭揃え */
align-content: flex-start;
/* けつ揃え */
align-content: flex-end;
/* 中央 */
align-content: center;
/* 間の等間隔 */
align-content: space-between;
/* 全体等間隔 */
align-content: space-around;

要するにデフォルトは

display: flex;
/* 並ぶ向き 左から右(デフォ) */
flex-direction: row;
/* 折り返し なし(デフォ) */
flex-wrap: nowrap;
/* 水平方向 左揃え(デフォ) */
justify-content: flex-start;
/* 垂直方向 揃え無し */
align-items: normal;
/* 複数行にした時の揃え 上揃え */
align-content: flex-start;