様々な親要素に「display」プロパティに「flex」を記入する事で子要素の配置を並べることができます。
記入例 [ display:flex; ]
上記の記載で子要素が横並びになります。さらに配置を指定するには下記のプロパティを追加します。

---

「 flex-direction [ 進行方向 ] 」
flex-direction:row; 子要素を左から右（初期値）
flex-direction:row-reverse; 子要素を右から左
flex-direction:column; 子要素を上から下
flex-direction:column-reverse; 子要素を下から上
「 flex-wrap [ 折り返し ] 」
flex-wrap:nowrap; 子要素を折り返しせず、一行に並べる（初期値）
flex-wrap:wrap; 子要素を折り返し、複数行に上から下へ並べる
flex-wrap:wrap-reverse; 子要素を折り返し、複数行に下から上へ並べる
「 justify-content [ 水平方向の揃え ] 」
justify-content:flex-start; 行の開始位置から配置。左揃え。（初期値）
justify-content:flex-end; 行末から配置。右揃え。
justify-content:center; 中央揃え
justify-content:space-between; 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
justify-content:space-around; 両端の子要素も含め、均等に間隔をあけて配置
「align-items [ 垂直方向の揃え ] 」
align-items:stretch; （初期値）… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
align-items:flex-start; … 親要素の開始位置から配置。上揃え。
align-items:flex-end; … 親要素の終点から配置。下揃え。
align-items:center; … 中央揃え
align-items:baseline; … ベースラインで揃える
「align-content [ 垂直方向の揃え(複数行にした時の揃え) ] 」
align-content:stretch;… 親要素の高さに合わせて広げて配置（初期値）
align-content:flex-start; … 親要素の開始位置から配置。上揃え。
align-content:flex-end; … 親要素の終点から配置。下揃え。
align-content:center; … 中央揃え
align-content:space-between; … 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
align-content:space-around; … 上下端にある子要素も含め、均等に間隔をあけて配置

---

また、子要素の幅の調整も行えます。
flex-grow:; 子要素に記入　横幅の伸び率「数値」
flex-shrink:; 子要素に記入　横幅の縮む比率「数値」
order:; 子要素に記入　順序の指定「数値」