Flex Box

7705 ワード
CSS テキストリンク
flex boxを理解する際には、2つの側面を重点的に理解することができます.
❗1つ目は中心軸と反対軸を用いた概念です.
❗2つ目は、Boxに適用される属性と、Itemに適用される属性です.

flexでは、中心軸と反対軸は何ですか?


反対の軸も中心軸の方向によって変化します.
  • 中心軸が行(水平)
    下図のように、ほぼ水平を中心軸としています.したがって、この場合、左から右方向(黒い矢印)が中心軸となるため、反対の軸が上から下方向(赤い矢印)となる.
  • 中心軸が柱(垂直)
    中心軸をcolumnに設定すると、経線の上、下方向(黒い矢印)が中心軸になるので、反対の軸(赤い矢印)は左から右になります.

    • Box(アイテムを含むコンテナ)に適用されるプロパティ

  • Boxに適用されるプロパティには、次のものがあります.
    1) display
    2) flex-direction
    3) flex-wrap
    4) flex-flow
    5) justify-content
    6) align-items

    • 1) selector { display : flex }

    <html>
  <body>
    <div class='container'>
      <div class='item item1'>1</div>
      <div class='item item2'>2</div>
      <div class='item item3'>3</div>
    </div>
  </body>
</html>
    上記htmlファイルがあります.コンテナに属性{display:flex}を適用した場合.containerはflex boxとなり、itemクラス名のdivラベルは左から右に並べられます.

    2) selector { flex-direction: (value) }


  • flex-direction: row;
    ->個別に設定されていない場合はrowがデフォルトになります.
    ->アイテムを左から右に水平に並べます.
    ->この場合、中心軸は水平です.

  • flex-direction: row-revers;
    ->itemは水平に並べられており、htmlで作成された順序とは逆の順序です.
    ->同様に、中心軸は水平です.

  • flex-direction: column;
    ->アイテムを上下に垂直に並べます.
    ->この場合、中心軸は垂直です.

  • flex-direction: column-reverse;
    ->htmlで作成された順序とは逆の順序でアイテムを垂直に並べます.
    ->同様に、中心軸は垂直です.

    • 3) selector { flex-wrap: (value) }


  • flex-wrap: nowrap;
    ->itemが1行いっぱいになってもitmeの大きさは減り、できるだけitemを1行に並べます.

  • flex-wrap: wrap;
    ->itemが1行いっぱい並んでいる場合は、自動的に次の行にジャンプします.

    • 4) selector { flex-flow: (direction-value wrap-value)

  • directionとwrapプロパティを同時に設定できます.
    はい.container { flex-flow : row wrap; }

    • 5) selector { justify-content: (value) }⭐


    中心軸を基準にitemの配置方法を決定します.
    (中心軸が行、すなわち水平位置合わせとする)

  • justify-content: flex-start;
    ->その他の設定を行わない場合、flex-startはデフォルトになります.
    ->中心軸がrow(水平)の場合、項目は左揃えになります.
    ->中心軸がcolumn(垂直)に設定されている場合、アイテムは上から下に並べられます.

  • justify-content:flex-end;
    ->中心軸がrow(水平)の場合、項目は右揃えになります.
    ->中心軸がコール(垂直)の場合、アイテムは下から上へ並べられます.

  • justify-content: center;
    ->品物を真ん中に置く

  • justify-content: space-around;
    ->物の間にスペースをとる.

  • justify-content: space-between;
    ->(上の画像を参照)

  • justify-content: space-evenly;
    ->(上の画像を参照)

    • 6) selector { align-items: (value) }


    相対軸に基づいてアイテムを配置する方法を決定します.

  • align-items: baseline;
    ->アイテムをベースラインに合わせます.

  • align-items: center;
    ->中心軸がrowの場合は、垂直方向を中心にしたい場合に使用します.

    • Itemに適用される属性

  • Itemに適用されるプロパティには、次のものがあります.
    1) order
    2) flex-grow
    3) flex-shrink
    4) flex
    5) align-self

    • 1) selector { order: (value) }


    品物の順序を変えることができます.

    2) selector { flex-grow: (value) }


    アイテムコンテナが大きくなったときにアイテムサイズを大きくするかどうかの属性を設定します.

  • flex-grow: 0;
    ->その他の設定がない場合はflex-grow:0がデフォルトです.
    ->容器の大きさが大きくなっても、固有の物の大きさを最大限に保つ.

  • flex-grow:1;
    ->容器の大きさが大きいほど、物の大きさが大きくなります.

    • 3) selector { flex-shrink: (value) }


    アイテムを含むコンテナが小さくなったときにアイテムを縮小するかどうかを設定します.

  • flex-shrink:0;
    ->その他の設定を行わない場合、flex-screw:0がデフォルトです.
    ->容器が小さくなっても、固有の物の大きさを最大限に保つ.

  • flex-shrink:1;
    ->容器が小さいほど、物の大きさが小さくなります.

    • 4) selector { flex-basis: (value) }


    各アイテムがどれだけのスペースを占めるかのプロパティを設定できます.
    📌はい.
    .container { display: flex;}
.item1 {flex-basis:10%;}
.item2 {flex-basis:50%;}
.item3 {flex-basis:40%;}

    5) selector { align-self: (value) }


    コンテナ全体に適用されるプロパティを離れ、特定のプロジェクトに新しいプロパティを適用して配置する場合にのみ使用されるプロパティです.
    リファレンス
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    タイトル1498:検索式
    Postmanユーティリティインタフェーステストシリーズ8-実行順序の制御