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

フロントエンド
4720 view

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

合わせて読みたい

GRID入門　CSSでHTMLをレスポンシブ対応にする方法

今回の記事では、CSSグリッドを使用して画面の幅に応じて列の量を変える方法を紹介します！CSSのグリッドを使いこなすことで、col-sm-4, col-md-8などを使用して、HTMLを乱雑にしたり、media only screen などを使用する必要性が無くなります。FlexBoxと一緒でモダン...

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！