書き方のベストプラクティスは常に変わる！
こんにちは。ProgLearn;編集部です。
突然ですが、皆さんはHTMLで要素を横並びにしたい時、どのようにCSSを指定していますか？
どんぶラッコ
んー、float:leftを使ってるかな…
2010年前半にHTMLを学習した方は、float:leftやclear:bothなどで横並びを設定していた記憶もあるのではないでしょうか。
これ、実は今あまり使わないんです！
display:flexを使う！
いろんな方法があるのですが、最近よく使われるのは display:flex;を利用する方法です。
例えば
<ul class="menu">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>という要素があり、li要素を横並びにしたいとします。その場合、
.menu{
display: flex;
}と指定してするだけで横並びになってしまうんです！
2020年9月26日追記: display:flex に関する解説記事 & 動画をリリースしました！
flexの使い方についてはflexboxfroggyというサイトを使うとより理解が深まります。。
上のゲームを学習するとわかるのですが、下記のようなcssと組み合わせることで様々な要素を指定することができます！
- flex-direction … 横方向に並ばせる？縦方向に並ばせる？
- row … 横
- row-reverse … 横、逆順
- column … 縦
- column-reverse … 縦、逆順
- justify-content … 各コンテンツの並び方の指定
- flex-start … 始点寄せ
- flex-end … 終点寄せ
- center … 中央寄せ
- space-between …間を開けて
- space-around … 間を開けて（周囲にスペース）
- align-items
- flex-start
- flex-end
- center
- baseline
- stretch
- align-self … 個別に設定
- align-content … 複数行の指定
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
- order 順番を変える
- flex-wrap
- nowrap … 折り返さずに1行にまとめる
- wrap … 折り返す
- wrap-reverse
- flex-flow … flex-direction + flex-wrap
floatみたいに、どこでclearをするか、とか余計な心配をしなくていいのがいいですね！
トレンドは常にチェック！
いかがだったでしょうか？今はdisplay:flexが主流ですが、1年後にはまた変わっているかもしれません。
実際、私がHTMLを初めて学んだ2011年にはdisplay:flexではなく、float:leftの方式が主流でした。たった8年で大幅に書き方が変わってしまっているのです。
エンジニアを志す以上、常に最新のトレンドを追うように心がけていきましょう！
より体系的にインプットしたい方は、こちらの書籍がおすすめです。周りの初学者には必ず勧めている書籍です！
