Flexbox – 横並びのテクニック

flexbox とは、ウェブページ表示の際に、横並びレイアウトを柔軟に、ほぼ勝手にやってくれる CSS の手法（？）です。

ほとんど使うこともなかったのですが、最近ちょっとしたことで必要になり使ってみたところ、すごく便利です。

今まで、float なんたらとか、inline-block とかの組み合わせてなんとか作ってみても、ちょっと幅を変えたりするだけで、レイアウトがくずれてしまっていたのが嘘のようです。
でも、均等配置で中央寄せとかにするには、いくつか指定が必要です、特に画像を並べる場合には、サイズを揃えようとして、縦横比がおかしくなったりもするので、ちゃんと指定しましょうね。

このブログで画像を表示するところでは、flexbox を使っています。
画像を２つ並べてみました。

    display: flex;
    justify-content: space-around;
    align-items: flex-start;

親要素には上記の指定、子要素の figure には width: 40%; と指定しています。
幅が同じになるような指定なので、どうしても縦長の画像の方が大きく表示されます。
なるべく縦横比が同じ画像を並べましょうね。

もっと早くから使っていればよかった。

新しい知識、便利な知識、もっと意欲的に吸収しないとだめですね。