flexで下のコンテンツにのgapを効かせる方法

横並びするさいに､Flexを使えば簡単です｡間隔はgapでできますが､下にgapが効かないことがあります｡そのような場合の対応です｡完成はこちら｡

完成系

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

HTML

<div class="g-box">
<div class="g-box__item">
<figure><img src="images/cloud.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

<div class="g-box__item">
<figure><img src="images/sakura.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

</div>

.g-boxでitemを囲んでいます｡名前は自由です｡分かりやすい名前にしましょう｡囲むのがポイントです｡

SCSS

.g-box{
display: flex;
flex-direction: column;
gap:20px;

&__item{
display: flex;
flex-direction: row;
gap: 10px;
figure{
width: 30%;
}
}
}

親要素にflexとflex-direction: columnを書きます｡flex-direction: columnは縦に並べるモノです｡あとは､gapで間隔を書きます｡

ここでは20pxですね｡

そのあと､itemに対して､flexを書きます｡このままだと､縦方向のになるので､flex-direction: rowを書きます｡画像と文字の間の間隔に､またもやgapを書きます｡

g-boxにgapを書いていますが､item内に適用されるのは､横方向のみです｡そこで､g-boxに､display:flexと､flex-direction: columnを書きます｡

これで完成です｡itemの下にgapが効く感じになります｡

CSS

.g-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.g-box__item {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.g-box__item figure {
  width: 30%;
}

SCSSをCSSにしただけです｡下線は2つです｡

さいごに

長年の悩みがなくなりました｡簡単に言うと､親要素にflexと､flex-direction: columnを書く｡そして､gapを指定する｡これで解決できます｡

正解は1つじゃないので､1つの方法です｡最も簡単なのは､itemに対して､margin-bottomｍを書く｡これが単純ですね｡最適な方法でHTMLコーディングをしましょう｡