WordPressでページビルダー系のプラグインを使ってサイト制作を行っている海外在住のデザイナーさんから、「PCでは写真と文章を左右交互に表示し、モバイルでは写真を文章より上に表示したい」というご相談をいただき、レッスンを行いました。
従来、ボックスを横並びにしたり縦並びにしたりする方法としては、CSSの float プロパティを使うのが主流でした。float は元々、画像の隣に文章を回り込ませて表示するような場面で使われてきましたが、あくまでも意味としては「次にくるボックスを隣に回り込ませる」のが目的なので、上記のように「左右交互に表示する」ような整然としたレイアウトのために使うのは相応しくありません。とはいえ、float しかなかった頃は、他に方法がなかったので、慣習的に float が使われてきました。
しかし、2017年に最新の仕様が公開された Flexible Box（通称FlexBox モデル）を利用すれば、Flex（フレックス：柔軟な）の名が表すように、float よりもはるかに柔軟なレイアウトが可能になります。ボックスの配置を指定するために策定されたCSSであり、2018年9月時点では、IE11を除く全てのブラウザが完全にサポートしているので、これからサイト制作を学んでいく方はもちろん、今まで float しか使ってこなかった方も、FlexBox を自由に使いこなせるように、積極的に利用していきましょう。
FlexBox を使ったレイアウトについて、こちらのページにサンプルを１つ掲載しました。
CSSのFlexBoxで横一列に並んだボックスの左右を入れ替える方法
FlexBoxの全体を解説した記事ではありませんが、よくわからないのでとりあえず float を使っている方は、ご覧いただければと思います。