CSS

関連用語について理解しておこう

Flexboxを使ったレイアウトをする際に知っておくべき用語についてまとめておきます。

  • 用語
  • 概念

用語

・今回はフレックスボックスを使う上で最低限知って置かなければ行けない用語や概念について学んで行きます。

・まずフレックスボックスでは親要素がありその中の子要素を横並びにするという作りになっていますた。このとき親要素のことをflex containerと呼び、子要素のことをflex itemと呼びます。

・またフレックスボックスを指定する際、containerの方にdisplay: flexとしましたがこの時の軸の方向がどちらの向きにitemを並べるかに大きく影響をもたらし、横の向きを主軸で縦の向きを交差軸という軸が設定されます。

フレックスボックスを作ってみよう

概念

・デフォルトだと、主軸は左から右、そして交差軸は主軸に直交する形で上から下に設定されます。フレックスボックスは主軸に沿って要素が並べられるので左から順に並びます

・フレックスボックスではこれらの軸によって、要素の配置が大きく変わってくるので、どちらがどちらを向いているか意識する必要はあります。

・フレックスアイテムのほうでは、こちらに flex: 1; を設定することで、要素の幅を可変にできます。このようにflex containerやflex itemにプロパティをつけることで詳細の指定をしていくことができます。

・flex containerにつけられる宣言とflex itemに付けられる宣言があるのでそれぞれ覚える必要があります。

-広告-

 

 






-CSS