display: flex; 現時点でまとめる。

カラム落ちを前提にするならば、float

• 見出しのとおり、カラム落ちさせるならば、floatを使う。
• そうでないときは、display: flexが便利。
• ナビゲーションなど。

まず並べる  display

• div id="flexBox" に、display: flex;
• 「横」に並べるには、flex-direction: row;
• 「縦」並べるには、flex-direction: column;
• メディアクエリーに使えそうです。

改行　wrap

• 一直線に並ぶから、flexBoxにwidthを設定して、
• 折り返すように、flex-wrap: wrap;、を記述する。
• wrap、とは「改行」のこと。「改行します」と、指定する。

横の空き

• そして、それぞれの要素の間隔を決める。
• justify-content: space-between; 要素の間にスペースを均等に付ける。
• justify-content: space-around; 要素の周りにマージンがあるイメージ。左右両サイドの空きは、要素間の空きの半分になる。
• まだまだいろいろできるみたいです。必要に応じて調べてみたいです。