要素の種類（ブロックレベル要素、インライン要素）を変更する方法

要素を横並びにする方法の1つは、横並びにしたい要素の親要素にdisplay: flex;を指定します。

.parent{
 display: flex;
}

上記の記述で子要素たちは横並びになります。

また、子要素たちを中央に配置したり等間隔に並べたりしたい場合は、FlexBoxを用いて配置を調整することもできます。

主軸方向（水平方向）の調整には、justify-contentプロパティを使用します。

.parent{
 display: flex;
justify-content: space-around;
}

上記のように記述すれば横に並んだ子要素たちが水平方向に等間隔に並びます。

他にも、

左寄せ↓

justify-content: flex-start;

右寄せ↓

justify-content: flex-end;

中央寄せ↓

justify-content: center;

などがあります。

水平方向の調整はこのような感じで行います。

続いては、垂直方向の調整方法について。

交差方向（垂直方向）の要素の調整にはalign-itemsプロパティを用います。

.parent{
 display: flex;
justify-content: space-around;
align-items: center;
}

上記の記述で、子要素たちは垂直方向の中央に配置されました。

他には、

上揃え↓

align-items: flex-start;

下揃え↓

align-items: flex-end;

となります。