【CSS】flexの正しい使い方

公開:2018年05月14日(最終更新:2018年05月15日)

floatの代わりになると期待されているflexbox。その効果はかなり大きいものですでに多くのサイトで導入されています。
非常に使い勝手が良い分、少しでも間違えるとまったく意図しない形になってしまいます。

どうもうまくflexを使えないよーという人の為に、flexの使い方を優しく紹介します。

flexboxとは?

Flexboxとは、要素のサイズが不明なものでも、ダイナミックに変化に柔軟に対応できるCSS3の新しいレイアウトモジュールです。レスポンシブデザインなど、これからはウィンドウサイズによってホームページの表示を正確に変化させていく必要があります。floatではどうしてもタグが長くなってしまうところをflexだったら数行で解決出来る優れものです。

ぜひ、使い方をマスターして自分のサイトでも生かしていきましょう!

基本的な考え方

flexを導入して大きくデザインが崩れてしまうのは、flexを置く場所が間違っていることが大半です。floatの場合は移動させたい要素(div等)にfloatを配置すればOKでした。しかし、flexの場合、少し勝手が変わっていきます。

flexを指定したい親枠(大枠)がブロック要素であればdisplay: flex;と指定。インライン要素であればdisplay: inline-flex;と指定します。

簡単に言えば、タグを使うと『改行』されるものがブロック要素。見出しタグなどですね。インライン要素はタグを使用しても改行されません。太文字タグやリンクタグなどがここに分類されます。

親枠に配置するオプション

flex-direction … 子要素の並ぶ向き
デフォルト値: row

flex-wrap … 子要素の折り返し
デフォルト値: nowrap

flex-flowを使えば、flex-directionとflex-wrapを同時に指定できる。
デフォルト値: row nowrap

子要素の配置をまとめて

justify-content … 水平方向の揃え
デフォルト値: flex-start;

align-items … 垂直方向の揃え
デフォルト値: stretch

align-content … 複数行にした時の揃え
デフォルト値: stretch

以上が親枠に設定できるオプションになります。

子要素に設定できるオプション

display: flex;が指定された要素の中にある要素(Flexアイテム)にだけ効果が発揮されます。親要素に display: flex; が指定されていないと動作しません。

デフォルトで問題がなければ、設定する必要はありません。

order … 番号をつけて配置順番を変更する。
flex-grow … デフォルトは1。それより大きくすると他の枠よりも大きい枠になる。
flex-shrink … 上とは反対にこちらは大きくすると縮む。デフォルトは1。
flex-basis … 子要素のベースとなる幅の指定。px,%,autoが使用可能。デフォルトはauto。
flex … flex-grow、flex-shrink、flex-basisをまとめて指定できる。

特定の子要素だけ配置を変えたい

align-self … 子要素の垂直方向の揃え
デフォルト値: auto

高さが足りない子要素の配置場所を決める。背景を出したい、文字の位置を揃えたいなどの問題を解決します。

以上が子要素に配置できるオプションになります。

flexの使い方

設定をずらっと見ていくとわかるようにfloatと違って、flexは個別に指定するのではなく、親枠でflexを宣言し、子要素をどのように配置するのかを設定します。floatに慣れていると1つずつ設定が出来ないので戸惑うこともあるかもしれませんが、flexは親枠を指定して子要素の横幅を指定するだけで出来るので慣れると非常に楽に感じるはずです。

これからはflexboxが主流になっていくと思いますので、使ったことがない人はぜひお試し下さい。

  • きちんと結果を出せるホームページにしたい
  • 今のホームページを新しく作り替えたい
  • ホームページをもっと効果的に運用したい
  • ホームページの定期的アドバイザーが欲しい

こんなお悩みをお持ちではありませんか?

弊社はホームページの悩みをすべて解決します!

ご相談は下記からお気軽にご連絡ください!