要素の並べ方やサイズを指定できるCSSのFlexboxの使い方

当ページのリンクには広告が含まれています。
html
  • URLをコピーしました!
生徒

Flexboxで要素の並び順やサイズを指定できますか?

先生

Flexboxで子要素の並び順やサイズなどの設定方法を説明します

この記事でわかること
  • Flexboxの要素の並びや順序を設定するプロパティの使い方
  • 各プロパティの設定でどう表示が変わるか
目次

CSSのFlexboxについて

CSSのFlexboxは要素を列方向や行方向にレイアウトするためのコンテナです。

Flexboxを利用すると、かんたんに要素を横並びにしたり要素ごとにサイズを変えたりできます。

Flexboxで要素を並べる方向などを設定するプロパティについては、以下の記事で説明しています。

親要素に display: flex; を設定するとFlexboxになる

並び方を設定したい要素の親要素に display: flex; を設定すると親要素はFlexboxになります。

Flexboxに何も設定しない場合、中の子要素は左から右に横向きに並びます。

グローバルメニューのメニュー項目を横並びにする時などによく使います。

order は子要素の並び順を指定する

Flexbox内の要素の順番を設定するにはorderプロパティ を設定します。

  • orderの値が小さい順に並びます。
  • 設定の無い要素は order: 1; より前に並びます。
  • orderの値が同じ場合、HTMLに書かれている順に並びます。

flex-grow は要素を伸張する割合を設定する

flex-glowは子要素が伸びる割合を設定するプロパティです。

flex-glowを指定した要素は親要素いっぱいまでサイズが伸びます。

複数の要素にflex-growを設定した場合、その値の割合で伸び率が決まります。

flex-shrink は要素を収縮する割合を設定する

flex-shrinkはflex-growと逆に、要素が縮む割合を指定します。

flex-shrinkを指定した要素は、子要素の合計サイズが親要素をはみ出した時に親要素に収まるように縮みます。

親要素をはみ出さない時はflex-shrinkプロパティは表示に影響しません。

複数の要素にflex-shrinkを設定すると、各子要素の縮む割合を指定できます。

以下の例ではflex-basisの値を変えて親要素からはみ出すとflex-shrinkの割合で各要素が縮むことを確認できます。

よかったらシェアしてね!
  • URLをコピーしました!
目次