WebサイトコーディングでFloatレイアウトに代わり、標準となりつつあるFlexbox。何やら便利な機能らしいのですがイマイチ使い方がよく分からなかったり、どんな時に使うべきなのかを解説します。できるだけ簡単に。
Flexboxの重要性
今まで要素の並べ替えにはFloatレイアウトしていましたが、色々な制限があって綺麗に横並びしなかったり、はみ出たり。それを色々なパターンで簡単に実現するためのCSSがFlexboxです。
素晴らしい機能ですが、CSSのひとつに過ぎません。
どんな時にFlexboxを使うのか
それは横並びのとき。
もちろんFlexboxで縦並びにする事もできますが、単純な縦並びなら普通に記述して行けばいいだけですからFlexboxを使う必要はありません。縦並びを指定する時はレスポンスデザインの時がほとんどになるでしょう。
実際にwebサイトを作る時って要素の並び順ばかりなので、Flexboxがどれほど重要なのか理解できるかと思います。一部のコンテンツ配置に使ってもいいし、サイト全体のコーディングにも使える代物です。
Flexboxの役割
コンテナの中のコンテンツ配置を簡単に行います。
親の要素に「displya:flexbox」を指定するだけでflexboxの出来上がりです。親の要素はdiv要素でもbodyタグなどでも問題ありません。親要素はコンテナとして扱われ、その中の子要素を自由自在に配置できます。
実際にFlexboxを使う時は、親要素に対して設定するFlexプロパティによって、要素の配置、順番などを決めます。ほとんどの場合、親要素のプロパティ指定だけで事足りるんですが、特定の子要素のみ幅を広げるなど、特定の子要素をいじる時は子要素のプロパティ指定も行います。
Flexboxの子要素は何をもって子要素となるのか
ブロック要素でもインライン要素でも親要素のくくりの中にあるものは、それぞれが子要素となります。
では複数の要素をdivタグで囲んだ場合はどうなるのでしょうか。その場合はdivタグを１つの要素として認識します。
Flexboxの中のFlexbox
実際にコーディングしていくと、Flexboxの中にさらにFlexboxを作る場面が頻繁に発生します。その場合も上のdivタグで囲んだ状況と同じになります。
親要素からしたら、flexで囲んだ範囲をひとつの子要素として認識します。
【編集後記】
今回はFlexboxの概要を理解するためだけの記事なので、細かいプロパティの指定方法などは全て割愛しました。私のように1年に1個サイトを作るぐらいのなんちゃってWeb屋だとFlexboxなんてものがある事自体忘れちゃいます。次から次へと新しい仕組みができるのは素晴らしい事ですが、頭がついていけない。
