flexbox とは、ウェブページ表示の際に、横並びレイアウトを柔軟に、ほぼ勝手にやってくれる CSS の手法（？）です。
ほとんど使うこともなかったのですが、最近ちょっとしたことで必要になり使ってみたところ、すごく便利です。
今まで、float なんたらとか、inline-block とかの組み合わせてなんとか作ってみても、ちょっと幅を変えたりするだけで、レイアウトがくずれてしまっていたのが嘘のようです。
でも、均等配置で中央寄せとかにするには、いくつか指定が必要です、特に画像を並べる場合には、サイズを揃えようとして、縦横比がおかしくなったりもするので、ちゃんと指定しましょうね。
このブログで画像を表示するところでは、flexbox を使っています。
画像を２つ並べてみました。
display: flex;
justify-content: space-around;
align-items: flex-start;
親要素には上記の指定、子要素の figure には width: 40%; と指定しています。幅が同じになるような指定なので、どうしても縦長の画像の方が大きく表示されます。
なるべく縦横比が同じ画像を並べましょうね。
もっと早くから使っていればよかった。
新しい知識、便利な知識、もっと意欲的に吸収しないとだめですね。
