[CSS]floatからFlexboxへ、新世代ブラウザへの対応を始めよう！vol.2
Flexboxをつかってナビゲーションを横並びにして、コンテンツも中央揃えをした前回に引き続き、Flexboxについてです。前回の最後の方でコンテンツ部分にalign-itemsを使いましたが、今回はさらに一歩突っ込んだところを書いていきます。ナビゲーションに使うだけでも十分便利ですが、コンテンツ部分には他にどのような使い方ができるかを一緒に見ていきましょう。
前回のおさらいもかねて…
align-itemsとjustify-contentを使って天地左右中央にコンテンツを配置します。
…一昔前でしたら、ネガティヴマージンを使ったり、positionとtransform: translate(-50%, -50%);を使ったりして配置していましたが、Flexboxなら、少ないコードで簡単に配置できます。
See the Pen the_center by necomacustom (@tamayura) on CodePen.27739
justify-contentは親要素である Flex コンテナにdisplay: flex;を設定した子要素である Flex アイテムの平行方向の配置、align-itemsは垂直方向の配置を設定します。これで天地左右中央にコンテンツを配置できます。次はその他の配置についてです。
コンテンツ部分にもFlexboxを使ってみよう
align-itemsの続き
まず簡単にコンテンツを作ってみました。
See the Pen align-item2_default by necomacustom (@tamayura) on CodePen.27739
わかりやすいように背景などを加工してあります。ここから、横並びにします。横並びにするには親要素に
display: flex;でしたね。1 2 3 | main { display: flex; } |
See the Pen align-item2_display:flex by necomacustom (@tamayura) on CodePen.27739
横並びになりました。ここまでは大丈夫ですね。
Flexboxの利点は、高さの異なる Flex アイテムが並んでいても、上の様に自動的に一番長いボックスに合わせて高さをあわせてくれます。これは、align-itemsの初期値がstretchに設定されているからなんですね。
つまり、
align-items: stretch;は Flex アイテムを Flex コンテナの高さいっぱいに配置します。align-itemsその他の値
align-itemsにはcenter、stretchの他にも値があります。
| プロパティの値 | 配置 |
| stretch | Flex コンテナの高さいっぱいに Flex アイテムを配置（デフォルト） |
| center | 天地中央に Flex アイテムを配置 |
| flex-start | Flex アイテムを上揃え |
| flex-end | Flex アイテムを下揃え |
| baseline | Flex アイテム内の文字のベースラインを揃えて配置 |
わかりやすくするために先ほどのサンプルのコンテンツ幅を300pxで固定します。そして試しにflex-endを設定した場合は…
See the Pen align-items: flex-end; by necomacustom (@tamayura) on CodePen.27739
この様になります。
flex-startでしたら、この逆で、上揃えになります。flexプロパティーを使ってみよう
flex-endで作ったサンプルはコンテンツ幅を300pxで固定していました。ですので、このサンプルのウィンドウサイズを狭めるとはみ出してしまいます（！）。レスポンシブに対応させるには、子要素であるFlex アイテムにflexプロパティを使います。このプロパティはflex-grow、flex-shrink、flex-basisをまとめたショートハンドで、この順番で値を書いていきます。
1 2 3 4 5 6 | flex-grow: 1; flex-shrink: 1; flex-basis: auto; /*ショートハンドで書くなら以下の書き方になります。*/ flex: 1 1 auto; |
これも試しに、子要素である<section>の幅の記述の代わりにflexプロパティを使ってみます。
1 | flex: 1 0 0%; |
See the Pen flex_shorthand by necomacustom (@tamayura) on CodePen.27739
「EDIT ON CODEPEN」をクリックして、ウィンドウの幅を狭めると確認できます。
また、flex-growはFlex コンテナに余白がある場合のFlex アイテムの伸びる比率を指定します。
例えば、文章が多いので見辛くなっているitem2の幅を2倍にしたいのであれば、
1 2 3 | main .col-2 { flex-grow: 2; } |
See the Pen flex_shorthand_col2 by necomacustom (@tamayura) on CodePen.27739
もちろん、
flex: 2;でもOKです。さらにレスポンシブに対応するには
flexショートハンドでFlex アイテムの幅をレスポンシブ対応にしました。
次はさらに実践に近づけてみます。
ブレイクポイントで横並びを縦並びに
スマートデバイス用ブラウザでは今までのサンプルでは見づらいですよね。なので、横並びにしていたFlex アイテムをスマートデバイス用のウィンドウサイズで見る場合のために、子要素であるFlex アイテムにflex-directionプロパティを使います。このプロパティはFlex アイテムの配置方向を指定します。
1 2 3 4 5 | @media screen and (max-width: 700px) { main { flex-direction: column; } } |
See the Pen flex-direction by necomacustom (@tamayura) on CodePen.27739
「EDIT ON CODEPEN」をクリックして、ウィンドウの幅を狭めると確認できます。
flex-directionプロパティーは他にもreverseでFlex アイテムを逆並びにしたり、column-reverseで縦に逆並びにすることもできますよ。子要素の折り返し
flex-direction: column;は横並びのFlex アイテムを縦並びにしました。これもスマートフォン対応でしたら、OKですよね。しかし、横並びの配置では狭いけれど、縦並びにはちょっと広い。なので複数行配置にしたいという時もあるかと思います。
その時に使うプロパティがflex-wrapです。子要素であるFlex アイテムを折り返します。親要素であるFlex コンテナに以下を追加します。
1 2 3 4 5 | @media screen and (max-width: 768px) { main { flex-wrap: wrap; } } |
flex-growが「1」の時、flex-basisに「0%」を指定するとFlex アイテムは Flex コンテナに収まるようにレイアウトされます。flex ショートハンドのうちの最後のプロパティ、flex-basisは子要素である Flex アイテムの基準となる幅を指定します。widthと同じような動きをしますので、flexショートハンドの一番最後の値を変えていきます。
そのまま「50％」といきたいところですが、Flex アイテムにマージンとパディングを設定した分をそれぞれの要素から差し引くようにします。これにはcalc()というものが使えます。なにかと便利なのでこの先も出てきます。
1 2 3 4 5 6 7 8 | @media screen and (max-width: 768px) { main { flex-wrap: wrap; } section { flex: 1 1 calc(50% - 50px); } } |
さらに、Flex アイテムを一つ追加してみました。
See the Pen flex-wrap1 by necomacustom (@tamayura) on CodePen.27739
先ほどと同じく「EDIT ON CODEPEN」のロゴをクリックして確かめてみてください。一番狭くしたところですと、さすがに読みづらいですね。
ちなみにflex-wrapの初期値はnowrap（折り返しなし）です。
それでは、スマートフォンくらいのウィンドウ幅では縦並びになるようにコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @media screen and (min-width: 481px) and (max-width: 700px) { main { flex-wrap: wrap; } section { flex: 1 1 calc(50% - 50px); } } @media screen and (max-width: 480px) { main { flex-direction: column; } } } |
display: flex;で横並びにしたものを縦並びに変えるのはflex-direction: column;でしたね。
See the Pen flex-wrap2 by necomacustom (@tamayura) on CodePen.27739
先ほどと同じく「EDIT ON CODEPEN」のロゴをクリックして確かめてみてください。ウィンドウ幅をせまくしていくと動きが確認できます。
意外に盛りだくさんで終わりの方は難しい値も出てきましたが、基本的な形は以上です。
お疲れさまでした！
参考にしたサイト
今覚えたい！エンジニアのための CSS の基礎講座 〜Flexbox レイアウト編〜 | nulabo
CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門 | ICS Media
「Good bye ~~ floats and “clearfix” hacks」これからはFlexboxの時代 | CSS Nite LP47 「Coder’s High 2016」
このサイトはBootstrapで作られていますが、最新のBootstrap4はFlexboxを採用しているんですよね。まだまだBootstrapの機能自体も記録として残せていませんが、Bootstrapを使わなくてもある程度レスポンシブなサイトを短いコードで書けるようなWebブラウザの流れになってきています。詳しい解説や考え方が載っていますので、参考にしたサイトもぜひ併せてご覧になってください。
ねこま(@necomacustom)でした。