技術記事やフリーランス記事をメインに情報公開をしています。是非見ていってください。

  1. フロントエンド

Flexboxを習得してモダンなCSSをかけるようにする方法【使い方】

最終更新日:2019/03/07

floatメインで配置している方や、Flexboxをプロパティーを調べながらでないと使えない人向けの記事です。

Flexboxは、完璧に覚えようとすると大変ですが、少しプロパティーを覚えるだけでも十分便利で、すぐにFlexboxの良さがわかると思います。
まず、Flexboxと、プロパティーの紹介をするので、その後にゲームを全クリして、Flexboxをマスターしましょう!

Flexboxとは?

Flexコンテナ(親要素)と、複数のFlexアイテム(子要素)で構成されたものです。
Flexible Box Layout Moduleの略で、簡単にフレキシブルなレイアウトを組めるのが特徴です。
float配置と比較して、レスポンシブ対応が圧倒的に簡単になるので、この機会に是非習得してください!

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flexboxの使い方

Flexboxは、Flexコンテナ(親要素)にdisplay:flex;を指定するだけで利用する事ができます。
Flexコンテナにdisplay:flex;を指定すると、Flexアイテムが左から順に横並びになります。

See the Pen XoWEgW by akitoshi (@kakizoe) on CodePen.

Flexboxを使用すると、上下左右中央寄せも、簡単に行う事ができるので、はじめにご紹介します!

Flexboxでの上下左右中央寄せ

Flexboxを使うと、上下左右中央寄せが簡単にできます。

Flexコンテナに以下のコードを貼り付けてみましょう。

display:flex;
justify-content:center;//横中央寄せ
align-items:center;//縦中央寄せ

Flexアイテムの数字が中央に配置されている事がわかると思います。

See the Pen WLNzgP by akitoshi (@kakizoe) on CodePen.

このように、Flexboxでは、コンテナにスタイルを適用するだけで、Flexアイテムの配置を指定する事ができます。

Flexboxで指定できる事。コンテナ編

Flexboxでまず覚える必要性があるのは以下の6つのプロパティーです。

  • 縦配置か横配置か flex-direction
  • 横軸の配置 justify-content
  • 縦軸の配置 align-items
  • 横幅(viewport)が変更された時にどのような動きにするか flex-wrap
  • flex-directionとflex-wrapを同時に指定 flex-flow
  • 複数行の縦配置 align-content

これからは、各プロパティーの使用方法について順に紹介していきます。

縦配置・横配置 flex-direction

flex-directionを利用すると、Flexアイテムを縦並びにするか、横並びにするかを指定する事ができます。
reverseをつけると、配置される順番が反転します。

  • row アイテムが、左から横並び。
  • row-reverse アイテムが反転して、右から横並び。
  • column アイテムが、上から縦並び。
  • column-reverse  アイテムが反転して、下から縦並び。

See the Pen OrJZrJ by akitoshi (@kakizoe) on CodePen.

横軸の配置 justify-content

Flexアイテムの横方向での配置を指定するには、justify-contentを使用します。

  • flex-start アイテムが、コンテナの左から並ぶ
  • flex-end アイテムが、コンテナの右端に並ぶ
  • center アイテムが、コンテナの横中央に並ぶ
  • space-between アイテムが、最初と最後のものは端に。それ以外は等間隔で並ぶ
  • space-around アイテムが、コンテナ内で、等間隔に並ぶ

See the Pen REwyPJ by akitoshi (@kakizoe) on CodePen.

縦軸の配置 align-items

Flexアイテムの縦方向での配置を指定するには、align-itemsを使用します。

  • flex-start アイテムが、コンテナの上部に並ぶ
  • flex-end アイテムが、コンテナの下から並ぶ
  • center アイテムが、コンテナの縦中央に並ぶ
  • baseline アイテムが、コンテナのベースラインに表示される
  • stretch アイテムが、コンテナの大きさに合うように表示される。

See the Pen NePzRN by akitoshi (@kakizoe) on CodePen.

レスポンシブ対応に必須 flex-wrap

Flexboxでは、行の折り返しをするためにflex-wrapプロパティーを利用します。
基本的にはflex-wrap:wrap;を指定する事が多いです。

  • nowrap 全てのアイテムが、ひとつの行に格納される。
  • wrap アイテムが次の行に折り返す
  • wrap-reverse アイテムが逆順になって別の行へ折り返す。

See the Pen bONjGr by akitoshi (@kakizoe) on CodePen.

flex-directionとflex-wrapをまとめて宣言 flex-flow

flex-flowプロパティーを使うと、flex-direction;とflex-wrap;を同時に宣言する事ができます。

flex-flow:<flex-direction> <flex-wrap>
//具体例
flex-flow:row-reverse nowrap;

複数行の縦配置 align-content

Flexboxでコンテナ内の行の配置を調整をするには、align-contentプロパティーを利用します。

  • flex-start 行がコンテナの上部に配置される
  • flex-end 行がコンテナの下部に配置される
  • center 行がコンテナーの中央に配置される
  • space-between 行が最初と最後は両端に、それ以外は等間隔に配置される。
  • space-around 行が等間隔に配置される。
  • stretch 初期値

See the Pen ebmjXO by akitoshi (@kakizoe) on CodePen.

Flexboxで指定できる事 アイテム編

今までは、Flexコンテナのみにスタイルを適用して、Flexアイテムの配置を操作してきました。
ですが、個別のアイテムを操作したい時には、Flexアイテムにスタイルを適用する必要性があります。

Flexアイテムに指定する事で利用できるプロパティーには以下のものがあります。

  • 並び順の変更 order
  • 縦配置の個別指定 align-self
  • 伸び率の指定 flex-grow
  • 縮み率の指定 flex-shrink
  • ベースとなる横幅の指定 flex-basis
  • flex-grow,flex-shrink,flex-basisをまとめて指定。flex

並び順の変更 order

Flexアイテムの並び順を個別に適用する場合はorderプロパティーを利用します。
使用例

order:4;

orderを指定すると、指定された順番に並びます。

See the Pen mayzLy by akitoshi (@kakizoe) on CodePen.

伸び率の指定 flex-grow

flex-growは、Flexコンテナ内に、あまりスペースがある場合に使えるプロパティーです。
個別のFlexアイテムが、他のFlexアイテムと比較して、どの程度伸びやすくするかを、相対値で指定します。

初期値が0ですので、一つのFlexアイテムに対して数字を指定した場合は、あまりスペースいっぱいに伸びます。
複数のFlexアイテムに値を指定した場合に、個々のアイテムが、どれぐらい伸びるかは、

あまりスペース ÷ 指定したFlex-growの合計 × そのアイテムで指定したflex-grow

となります。

縦配置の個別指定 align-self

縦配置は、align-itemsでFlexコンテナにスタイルを適用する事で変更ができますが、
align-selfはalign-itemsよりも優先して、適用されます。

See the Pen EGaGqb by akitoshi (@kakizoe) on CodePen.

縮み率の指定 flex-shrink

flex-shrinkは、Flexアイテムの幅の合計が、Flexコンテナより長い場合に使えるプロパティーです。
個別のFlexアイテムが、他のFlexアイテムと比較して、どの程度縮みやすくするかを、相対値で指定します。

先程のflex-growとは違いデフォルト値が1となっています。
flex-shrink:4;と指定した場合は、flex-shrink:1;のものの4倍縮みやすくなります。

See the Pen GPgYLZ by akitoshi (@kakizoe) on CodePen.

ベースとなる横幅の指定 flex-basis

flex-basisプロパティーを指定すると、個々のFlexアイテムの幅を指定する事ができます。
初期値は、flex-basis:auto;です。

See the Pen NePezQ by akitoshi (@kakizoe) on CodePen.

flex-grow,flex-shrink,flex-basisをまとめて指定。flex

flexは、一括指定プロパティで、 flex-grow, flex-shrink, flex-basisを指定する事ができます。

デフォルト値
flex:0 1 auto

指定方法
flex:flex-grow flex-shrink flex-basis

以上でFlexboxの各プロパティーの紹介は終わりになります。

便利な配置方法や、サポート状況をざっとみて、是非FLEXBOX FROGGYに挑戦してみてください。
今までに紹介したプロパティーの組み合わせで、全部クリアできるはずです!

便利な配置方法 margin-right:auto;

flexboxのプロパティーではないのですが、Flexコンテナにdisplay:flex;のみが指定されているときに
Flexアイテムにmargin-right:auto;を指定すると、一つのアイテムのみを左寄せにする事ができます。

See the Pen KbwJbX by akitoshi (@kakizoe) on CodePen.

Flexboxのサポート状況

flex-support
Flexboxサポート状況

古いバージョンへの対応にはこの記事が良いと思います。
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入

さあ、カエルと戦おう(ゲームでFlexboxに慣れる)

FLEXBOX FROGGYはFlexboxを楽しみながら理解できるゲームです。
最終問題とか半端なく難しかった思い出がありますが、是非チャレンジしてみてください!
では!

最後に。英語版ですが、わかりやすいチートシートです。
FlexboxCheatSheet

合わせて読みたい

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。