Flexコンテナについて説明します。

要素を横並びさせたい場合、Flexコンテナを使用するだけでも可能です。

Flexコンテナ

Flexコンテナ は Flexアイテム をラッピングする為のコンテナです。
親要素にFlexコンテナを指定します。
子要素(Flexアイテム) をどのように並べるかを指定出来ます。
子要素(Flexアイテム) をどのように配置するかを指定出来ます。

子要素(Flexアイテム)の並び方

子要素(Flexアイテム)の並び方を指定するプロパティは以下の通りです。

flex-direction	要素(Flexアイテム)の並び方を指定します。要素の並ぶ方向は左横並びだけでなく右横並び、縦並びも指定出来ます。
flex-wrap	FlexアイテムがFlexコンテナの幅または高さを超え場合、超えた分のFlexアイテムをどう並べるかを指定出来ます。
flex-flow	flex-direction と flex-wrap を同時に指定出来ます。

上記の詳細は以下を参考にして下さい。

子要素(Flexアイテム)の配置

子要素(Flexアイテム)の配置を指定するプロパティは以下の通りです。

justify-content	要素(Flexアイテム)の水平方向の配置位置や要素同士の間隔を指定します。
align-items	要素(Flexアイテム)の縦方向の配置位置や要素の高さの大きさの揃えを指定します。
align-content	行が複数行になった場合の要素(Flexアイテム)の縦方向の配置位置や要素の高さの大きさの揃えを指定します。 縦方向における要素同士の間隔も指定出来ます。

上記の詳細は以下を参考にして下さい。

最後に

特にありません。