反応型ページ(8):Flexbox

1478 ワード

可変ボックスの起動

  • フレキシブルボックス==親ボックス
  • のほとんどのプライマリ属性値は、親ボックスの
  • に配置されます.
  • Flak SublicBoxの子Box=Flexアイテム
  • フレキシブルボックスの軸:主軸(デフォルト水平)と交差軸(デフォルト垂直)
  • 可変ボックス技術の学習

  • の親ボックスに、
  • というプロパティを追加します.
    display: flex
  • サブフレームの配置方向を設定
  • 複数行
  • サブボックスの配置
  • 一度に設定する
  • 2,3
  • flex-flow: row wrap-reverse;

    スピンドル方向に各種ラッパを置く

  • 交差軸方向に異なるラッパを置く

  • ベンド項目を交差軸方向に個別に配置するには

  • 残りの
  • はalign-items属性値説明の
  • と同じです.

    複数行のベンド項目を交差軸方向に配置

  • Flexプロジェクトの配置順序の変更

  • Flexプロジェクトのサイズを増やして縮小(?!)