flexで横並びしないとき

コンテンツとサイドバーを置くとき､flexを使えば簡単です｡こんな感じですね｡

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

HTML

<div class="flex-1">

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

<aside class="side-bar">
<figure><img src="images/sakura.JPG"></figure>
<p>サイドバー</p>
</aside>

</div>

.flex-1でコンテンツである､leftとside-barを囲んでいます｡これだけです｡

CSS

.flex-1{
display: flex;
gap: 1rem;
}

親要素である､flex-1にdisplay:flexを書きます｡gapは間隔です｡デモを見て頂くと､画像の大きさが異なります｡そのさいは､こんな感じでCSSを書くと､同じにできます｡

.left,
.side-bar{
width: 50%;
}

ここまでは簡単ですが､leftの中にコンテンツが複数あり､そして横並びにしたい｡そんなときは､こうします｡

完成系はこちら｡

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

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

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

HTML

<div class="flex-2">

<div class="left-content">

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

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

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

</div>

<aside class="side">
<figure><img src="images/sakura.JPG"></figure>
<p>サイドバー</p>
</aside>

</div>

HTMLはほぼ､かわりません｡コンテンツを追加しただけです｡解説の都合上､親要素の名前(flex-2)にしています｡

CSS

.flex-2{
display: flex;
gap: 1rem;
}

.left-content{

display: flex;
gap: 1rem;

}

.item{
width: calc(100% / 3);
}

flex-2でコンテンツとサイドバーを横並びにします｡さらに､left-content内のコンテンツ(item)を横並びさせるので､left-contentにもflexを書きます｡

そのあと､コンテンツ(item)のサイズをcalcで計算します｡3つあるので､100%を3等分します｡

全体に効かせるflexと､コンテンツ内のアイテムをflex｡少しややこしいですが､マスターしましょう｡

さいごに

似たようなgridがありますが､flexの方が気軽ですね｡前はgridを使っていたのですが､今はflexを使っています｡flexが好きだ(笑)｡

おしまい！