フレックスボックス超入門 主軸と交差軸の方向をマスターする

投稿日 : 2022年04月01日 更新日 :

要素が横並びになる

display: flex

初期設定では、子要素は折り返さない

  .oya-yoso {
    display: flex;
  }      
  .ko-yoso{
    width: 300px;
  }

折り返すにはflex-wrapを指定する。

  .oya-yoso {
    display: flex;
    flex-wrap: wrap;
  }      
  .ko-yoso{
    width: 300px;
  }

主軸と交差軸を理解する

主軸と交差軸を一行で指定するflex-flow

  .oya-yoso {
    display: flex;
    flex-flow: row wrap;                     /* 主軸：右方向 / 交差軸：下方向 */
    flex-flow: row wrap-reverse;             /* 主軸：右方向 / 交差軸：上方向 */
    flex-flow: row-reverse wrap;             /* 主軸：左方向 / 交差軸：下方向 */
    flex-flow: row-reverse wrap-reverse;     /* 主軸：左方向 / 交差軸：上方向 */
    flex-flow: column wrap;                  /* 主軸：下方向 / 交差軸：右方向 */
    flex-flow: column wrap-reverse;          /* 主軸：下方向 / 交差軸：左方向 */
    flex-flow: column-reverse wrap;          /* 主軸：上方向 / 交差軸：右方向 */
    flex-flow: column-reverse wrap-reverse;  /* 主軸：上方向 / 交差軸：左方向 */
  } 

「主軸」と水平方向の子要素の揃え方

「主軸」と垂直方向の子要素の揃え方（1行）

「主軸」と垂直方向の子要素の揃え方（複数行）

まとめ