Flexbox

マークアップ

Flexbox(Flexible Box Layout Module)は、CSSのレイアウト手法の一つです。細かいところを自動で調整してくれたり、簡単にレイアウトを作成できるので、よく使用されます。基本的な使い方をご紹介しましょう。

Flexboxはコンテナ(親要素)とアイテム(子要素)で構成されます。まずはコンテナに使用するプロパティから見ていきましょう。

コンテナ(親要素)に使用できるプロパティ

display:flex; アイテム(子要素)を横並びにする
display:inline-flex; インライン要素のアイテムを横並びにする
flex-direction アイテムの並び順を指定する
flex-wrap アイテムの折り返しを指定する
flex-flow アイテムの並び順と折り返しを一括で指定する
justify-content アイテムの水平方向の位置を指定する
align-items アイテムの垂直方向の位置を指定する
align-content アイテムが複数行に渡った場合の垂直方向の位置を指定する

flex-directionで使える値

  • row(初期値)……アイテムを左から右に配置
  • row-reverse……アイテムを右から左に配置
  • column……アイテムを上から下に配置
  • column-reverse……アイテムを下から上に配置

flex-wrapで使える値

  • nowrap(初期値)……折り返しせず、1行に並べる
  • wrap……アイテムを折り返し、上から下に配置
  • wrap-reverse……アイテムを折り返し、下から上に配置

flex-flowの値

flex-flow:flex-directionの値 flex-wrapの値;

例
flex-flow: row-reverse wrap;
flex-flow: row-reverse wrap;

justify-contentで使える値

  • flex-start(初期値)……左揃えで配置
  • flex-end……右揃えで配置
  • center……中央揃えで配置
  • space-between……最初と最後のアイテムを両端に配置し、それ以外のアイテムを等間隔に配置
  • space-around……両端のアイテムも含め、等間隔に配置

align-itemsで使える値

  • stretch(初期値)……コンテナ(親要素)の高さ、またはコンテンツの一番多いアイテムの高さに合わせて上下に広げて配置
  • flex-start……上揃えで配置
  • flex-end……下揃えで配置
  • center……中央揃えで配置
  • baseline……ベースラインに合わせて配置

align-contentで使える値

  • stretch(初期値)……コンテナの高さに合わせて広げて配置
  • flex-start……上揃えで配置
  • flex-end……下揃えで配置
  • center……中央揃えで配置
  • space-between……最上行が上揃え、最下行が下揃えで残りの行が等間隔に配置される
  • space-around……すべての行が等間隔で配置される

アイテム(子要素)に使用できるプロパティ

order アイテムの並び順を指定
flex-grow アイテムの伸びる比率を指定
flex-shrink アイテムの縮む比率を指定
flex-basis アイテムのベースの幅を指定
flex アイテムの伸び・縮み・ベースの幅を一括で指定
align-self 垂直方向の位置を指定

orderの値

「order:数値;」とすることでHTMLの記述順に関わらず、並び順を指定できます。

flex-growの値

「flex-grow:数値;」とすることで、他のアイテムに対してどのくらい左右に伸びるかを指定できます。

flex-shrinkの値

「flex-shrink:数値;」とすることで、他のアイテムに対してどのくらい縮むかを指定できます。

flex-basisの値

「flex-basis:数値(px、%、rem);」とすることで、アイテムの基本となる幅を指定できます。widthのFlexbox版。

flexの値

「flex: flex-growの値 flex-shrinkの値 flex-basisの値;」とします。

例
flex: 2 0 30%;
item4{flex: 2 0 30%;}

align-selfで使える値

  • auto(初期値)……コンテナのalign-itemsの値
  • flex-start……上揃えで配置
  • flex-end……下揃えで配置
  • center……中央揃えで配置
  • baseline……ベースラインに合わせて配置
  • stretch……コンテナ(親要素)の高さ、またはコンテンツの一番多いアイテムの高さに合わせて上下に広げて配置

アイテムの垂直方向の位置をまとめて指定したいならalign-items、個別に指定したいならalign-selfと使い分けることができます。

コメント

  1. […] FlexboxFlexbox(Flexible Box Layout Module)は、CSSのレイアウト手法の一つです。細かいところを自動で調整してくれたり、簡単にレイアウトを作成できるので、よく使用されます。基本的な使い方 […]

タイトルとURLをコピーしました