Help us understand the problem. What is going on with this article?

2017年になったのでそろそろCSSのレイアウトをおさらいする(CSS Flexbox Layout)

More than 1 year has passed since last update.

cloudpack あら便利カレンダー 2017 5日目の記事です。

最近めっきりfloatをレイアウト組に使わなくなりました。自分ではこの1年くらい書いた記憶がないです。
他のCSS関連の記事でもFlexbox, Grid Layoutのキーワードがみえてきたので、このあたりで今CSSでレイアウト組む場合の選択肢についてまとめようと思います。

Flexbox Layout

こちらはざっくり説明すると親要素の直下の子要素に対し縦軸もしくは横軸に一律にコントロールしたいときにかなり威力を発揮します。

以下サンプルは色の薄いboxが何もしていしない場合のスタイルです

justify-content(親要素に指定)

親要素全体に対して子要素を横軸でどう統一するかを指定します。よく使うjustify-content: center;を指定した場合が以下の例です。
image.png
CodePen

align-items(親要素に指定)

親要素全体に対して子要素を縦軸でどう統一するかを指定します。よく使うalign-items: center;を指定した場合が以下の例です。
ちなみにjustify-content:center;と組み合わせるとボックス全体の中心に配置することが出来ます。
image.png
CodePen

flex-grow(子要素に指定)

子要素の拡大率を他の子要素と相対的に決定されます。ちなみにwidth指定よりも優先されます。
相対的にというのがポイントでflex-growの指定をもとにさらに後述のflex-basis、親要素のflex-wrapも影響を受けます。
あとに続くflex-shrink flex-basisも含めて相対的に決定されるためレスポンシブレイアウトに利用しやすい反面、固定レイアウトには少し使いづらくなっています。
image.png
CodePen

flex-shrink(子要素に指定)

子要素の縮小率を他の子要素と相対的に決定されます。
image.png
CodePen

flex-basis(子要素に指定)

子要素の幅を任意に(%,pxなど)指定します。ただし親要素が指定の幅よりも小さい場合はそのとおりにはなりません。
image.png
CodePen

その他

  • flex-wrap 親要素に指定。子要素の幅合計が親要素の幅よりも大きい場合の折り返すかどうかの指定。流し込みレイアウト時などはこれを指定しています。
  • flex flex-grow flex-shrink flex-basisのショートハンド指定
  • order 子要素に指定することでレイアウトの順番を変更することが出来ます。window幅によって順番を変えたいときなどに重宝します。

以上がFlex Layoutの概要です。チートシート的に役立てれば嬉しいです。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away