今回の記事では要素を横並びにするやり方を紹介いたします。

要素を横並びにすることは、とても多いと思います。

まずは通常の何も指定していない状態から見ていきます。

このように縦に並んでいる四角形を横並びにしたいとします。

やり方

display: flex;を使います。

四角形の親要素に対してdisplay: flex;を指定します。

すると先程の縦に並んでいた四角形は

このように横並びにすることができます。

flex-boxはスマホ対応など柔軟に変化させることができるのでとても便利です。