ブログ

Flexboxの備忘録 〜しっかりとした親子関係を築こう〜

Flexbox。
ちょっと前まではプロパティが多すぎる印象が強く仲良くなれませんでしたが、「flexboxも人も一緒じゃないか！」。
そんな見方をしたらとても愛着が湧き、今となっては横並びや中央配置のレイアウトが目に入ったときには真っ先に使うようになりました。
ブログが始まったのことを良い機会とし、ここで備忘録と共に仲良くなる方法を紹介しようと思います。

Flexboxを扱うにあたり大事だと思ったこと、それは「親と仲良くなる」です。
子供は気にすることが多すぎるので、まずは親と仲良くなりましょう。

親要素にセットするプロパティ

セットしなくともデフォルトとして省略できる場合もあるかと思いますが、一つの案件を完成させるまでの間に様々なCSSを書いても自分が迷わないよう、また多様なブラウザに左右されないように基本セットとして覚えることをおすすめします。

display

まずはdisplayプロパティの値をflexにします。
こうすることで直下に配置された子要素にflexboxとしての指示を行うことができます。

.hoge {
    display: flex;
}

あとはflexboxに限った話ではありませんが、どの要素がどの親で、どの要素がどの子なのかしっかりを理解しておくことが大切です。
HTMLをつくる際には、しっかりとした親子関係を築きましょう。

子要素に色々とスタイルを当てた後にレイアウトを決めようとすると、思い通りにならなかった場合に何が原因で違っているのか見失いがちになりやすくなります。
そのため、まずは親要素からレイアウトのためのスタイル付与。それからフォントやカラー、マージン等の細かいスタイルを付与した方が手間が少なく済ませられるかと思います。
flexboxを使用する場合、マージンのスタイルをつける必要すらなくなることも少なくありません。まずは親がドンと構えましょう。

flex-flow

こちらは「flex-direction」「flex-wrap」という二つのプロパティをまとめてセットするものです。

「flex-direction」は、配置する方向を決めます。
子要素を横方向に配置する「row」と縦方向に配置する「column」があります。
必要になることが多いのは「row」ではないでしょうか。デフォルト設定もこちらになっています。
グロナビをはじめ、要素を横並びに配置したい場合は「display:inline」や「float」などもありますが縦も横もいっぺんに管理できるflexboxはとても楽です。
「column」は、ほかにflexbox特有プロパティを必要としない場合、通常の「display: block」となんら変わりないため、迷うくらいならflexboxにしないことをおすすめします。

そのほかそれぞれには要素の順番を逆に配置する「column-reverse」「row-reverse」があります。
PCとスマホで配置する順番を逆にしたいときや、リスト表示で奇数列と偶数列でレイアウトを反転させたいときなどに有効です。

「flex-wrap」は、子要素のトータルの幅もしくは高さが親要素の幅や高さを上回ったときに、折り返すかどうするかを設定するプロパティです。

See the Pen flexbox flex-flow by masayuki yamada (@yamada-evoworx) on CodePen.

PCのときはサムネイル画像とテキストが交互に配置されるけど、スマホは全て共通になるようなレイアウトのときには有効的に使うことができます。

justify-content

親要素に対して水平方向の揃えを整えるプロパティです。
「column」の場合は、縦の配置。「row」の場合は、横の配置になります。

  • flex-start・・・親要素の始まり位置（rowは左、columnは上）から順に配置。
  • flex-end・・・親要素の終わり位置（rowは右、columnは下）から順に配置。
  • center・・・親要素の真ん中に配置。
  • space-between・・・親要素の幅に合わせ、両端にスペースを無くした状態で等間隔配置。
  • space-around・・・親要素の幅に合わせ、両端にスペースも含めた状態で等間隔配置。

align-items

親要素に対して垂直方向の揃えを整えるプロパティです。
「column」の場合は、横の配置。「row」の場合は、縦の配置になります。

  • stretch・・・親要素に合わせて子要素が伸びる。
  • flex-start・・・親要素の始まり位置（rowは上、columnは左）を基準に配置。
  • flex-end・・・親要素の終わり位置（rowは下、columnは右）を基準に配置。
  • center・・・親要素の真ん中に配置。
  • baseline・・・テキストのベースラインを基準に配置。

align-content

こちらは、子要素が複数行になったとき整列させるプロパティです。
「flex-wrap」の値が「wrap」になっているときには必要になるかと思います。

  • stretch・・・親要素に合わせて子要素が伸びる。
  • flex-start・・・親要素の始まり位置（rowは左、columnは上）から順に配置。
  • flex-end・・・親要素の終わり位置（rowは右、columnは下）から順に配置。
  • center・・・親要素の真ん中に配置。
  • space-between・・・親要素の幅に合わせ、両端にスペースを無くした状態で等間隔配置。
  • space-around・・・親要素の幅に合わせ、両端にスペースも含めた状態で等間隔配置。

以上、flexboxの親に対するプロパティは、

.hoge {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center; //nowrapのときは割愛しても可
}

です。こちら、セットで覚えてしまいましょう。
これらの指示さえ与えれば、大抵の子供たちはきれいに整列してくれるはずです。

ちなみに今回は割愛しましたが、お子様たちが抱えるプロパティは以下のものがあります。

  • order・・・順序の指定
  • flex-grow・・・伸びる比率を指定。
  • flex-shrink・・・縮む比率を指定。
  • flex-basis・・・ベースとなる幅を指定。
  • flex・・・flex-grow、flex-shrink、flex-basisをまとめて指定。
  • align-self・・・align-itemsを個々に指定。

私は固定の幅のままがいい。僕はみんなの倍の幅がいい。俺はみんなより高いところがいい。
もう言いたい放題です。
その割になかなか案件の中では、使い道の難しい印象があります。
いつか子供好き放題遊ばせられる寛容な案件があれば活かしてみたいと思います。

参考サイト