Flexboxレイアウトの概要


CS 3の最新レイアウトモデル.
表示プロパティを使用します.
floatの代わりに、より効率的に使用します.
物を縦横に並べる.
物の順序や割合などを適用しやすい.
戦战Flexとは?
ソートツールFlex!これにより、内部アイテムの配置が容易になります.

」Flexの二軸
Flexは2つの軸で構成されています.主軸(main-axis)と交差(cross-axis)軸です.

Flex容器に物を入れると、主軸方向に沿って積み上げられます.

コンテナでflexソートを使用すると、A、B、C、Dアイテムは次のようにソートされます.
<div class="container">

      <div class="item">A</div>

      <div class="item">B</div>

      <div class="item">C</div>

      <div class="item">D</div>

</div>