Wiki_CSS_フレックスボックスレイアウト - inoueshinichi/Wiki_Web GitHub Wiki

フレックスボックスレイアウトの要点

参考

フレックスボックスレイアウト

親要素
    に設定する

  • フレックスボックス有効 display: flex; (横方向：左から右)
  • 主軸方向の各ボックスの配置設定 justify-content: [flex-start | flex-end | center | space-between | space-around];
  • 主軸方向に交差する方向の各ボックスの配置設定 align-items: [flex-start | flex-end | center | baseline | stretch];
  • 主軸方向の向きの設定 `flex-direction: [row | row-reverse | column | column-reverse ];
  • 折返しの設定 `flex-wrap: [nowrap | wrap];
  • スクロールで画面からはみ出す部分を調整する overflow: [visible | hidden | scroll | auto];

子要素

  • に設定する
    • アイテムの表示順を指定する order: 数値(正負0)
    • アイテムの幅を指定する flex-basic: [auto | px | %];
    • アイテムの拡大率を指定する(あくまで拡大率の順序のみ,詳細比率はauto, ※ 0は原寸) flex-grow: 数値(正負0);
    • アイテムの縮小率を指定する(あくまで縮小率の順序のみ,以下同文) flex-shrink: 数値(正負0); 
    HTML
<div class="flax-layout">
  <ul>
    <li>Box1</li>
    <li>Box2</li>
    <li>Box3</li>
  </ul>
</div>

CSS
display: flex;

           ↑ align-items
  -------------------
  |        |        |
  --------------------> justify-content
  |        |        |
  -------------------
           |
    • ⚠️ **GitHub.com Fallback** ⚠️