flexレイアウト適用前

基本的に何も設定していない場合、display: block;の表示で
ブロックのようにかたどられた要素が縦に積み重なるレイアウトになります。

flexレイアウト適用後

親要素(今回は、scetion要素)にdisplay:flex;を付加することで子要素は、横並びになります。

この時にflexを施される親要素を"flexコンテナー"、中の整列する子要素を"flexアイテム"といいます。

flexアイテム(コンテンツ)に元づいて幅が伸縮

そして、flexを施すだけでは横１列配置するだけのため、コンテンツが多いとはみ出る現象が起きます。

flexコンテナーにflex-wrap: wrap;を併用することではみ出そうになったら行を増やすという設定を行えます。

整列させる要素のサイズと個数の調整

３要素を並べられるよう枠を仮に設けたとします。今回のケーズであれば、section要素の親要素であるbody要素のwidthが適用されるので100%は1000pxとなっています。 その100%を３分の１枠使うの有れば33%、２枠使うように変形させるので有れば66%といった具合で設定しています。

こうすることで、クラスの付加によりサイズ(%)%からくる数量も同時進行で調整します。

４分割にするのであれば、25%を作って各々のアイテムに設定してあげるといいでしょう。

！！margin / paddingの影響があるので、このサンプルではそれを差し引いた%で微調整されております。
margin / paddingを0にすれば33.3%・66.6%・100%などより簡易でより正確に設定が可能です。

このような具合で、設定が面倒な面が多いのでbootstrapではこれらを簡易化してくれるクラス『col』が準備されています。