flexで下の余白を埋める
最近､gridよりflexを使う機会が多くなりました｡しかし､ボックスの下に余白が生まれて､てんやわんやしました｡ネットでそれらしい情報を元に､対応したら上手くいきました｡完成系は以下になります｡
完成系
完成系は以下になります｡
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
｢ここに文章が入ります｣の文字の下にピッタリと画像が貼り付いています｡サイドバーは特に何もしていません｡デフォルトでマージンやパディングがないことが確認できます｡
ただ､僕の場合､リセットCSSで対応しています｡リセットCSSを指定しないのであれば､何かしらの余白ができるでしょう｡
HTML
<div class="wrapper">
<div class="left">
<div class="left__item">
<figure><img src="images/cloud.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
<div class="left__item">
<figure><img src="images/cloud.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
<div class="left__item">
<figure><img src="images/cloud.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
<div class="left__item">
<figure><img src="images/cloud.JPG"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
</div>
<aside class="side-bar">
<div class="side-bar__box">
<figure><img src="images/cloud.JPG"></figure>
<p>サイドバー</p>
</div>
<div class="side-bar__box">
<figure><img src="images/cloud.JPG"></figure>
<p>サイドバー</p>
</div>
<div class="side-bar__box">
<figure><img src="images/cloud.JPG"></figure>
<p>サイドバー</p>
</div>
</aside>
</div>
wrapperで､left(コンテンツ部分)､side-bar(サイドバー)を囲んでいます｡
CSS
.wrapper {
width: 100%;
display: flex;
gap: 2%;
flex-wrap: wrap;
align-items: flex-start;
}
.left {
width: 70%;
display: flex;
flex-wrap: wrap;
-moz-column-gap: 1%;
column-gap: 1%;
}
.left__item {
width: 49%;
}
.side-bar {
width: 28%;
}
SCSS
.wrapper{
width: 100%;
display: flex;
gap: 2%;
flex-wrap: wrap;
align-items: flex-start;
}
.left{
width: 70%;
display: flex;
flex-wrap: wrap;
column-gap: 1%;
&__item{
width: calc(98% / 2);
}
}
.side-bar{
width: 28%;
}
wrapperにflexを書き､wrapperは親要素なので､align-items: flex-start;を書きます｡これで､｢ここに文章が入ります｣の下ぴったりに画像を置くことができます｡
簡単に言うと､親要素にalign-items: flex-start;ですね｡flexも忘れず､書きましょう｡
子要素はサイズを決める必要がある
display:flexで簡単に横一列にできますが､flex-wrap:wrapにすると画像が横に並びません｡そこで､子要素､ここではitemになりますが､widthでサイズを決める必要があります｡そのさい､gapも考慮する必要があります｡
ややこしいですが､calcが便利です｡CSSでは使えないと思うので､これを機に､SCSSの勉強をしてみましょう｡
簡単に解説している記事があるので､お時間ある方はご覧ください｡
コンテンツ内のflexは
ここではleftにしていますが､これに関してもflexで横並びしています｡先ほど書いたように､widthを書かないと横並びになりません｡やはり､calcの方が便利ですね｡電卓で計算する必要がありません｡
普通のCSSでも使えるのだろうか｡昔､調べたところ､無理っぽいので､SCSSがいいですね｡
ちなみに､SCSSは最終的にCSSにコンパイルする必要があります｡
vscodeだと､プラグインで可能なので､気になる方はチェックして下さい｡
さいごに
実は､この一連は2時間くらい悩みました｡僕が困るということは､誰かも困っていると思っています｡もちろん､正解は1つじゃありません｡
他にも方法があるかもですので､参考程度にとどめておいてください｡
対応はバックアップをしてからにしましょう｡
これを元にした､デモサイトを作ったので､そちらも合わせてご覧ください｡