コンテナクエリでflexを使う

コンテナクエリでflexを使ってみます｡完成はこちら｡ウィンドウを伸縮させると､3つの写真が動きます｡スマホでは縦並びです｡

完成

HTML

<div class="wrapper">

  <div class="content">

  <div class="content__item">
  <figure><img src="images/cloud.JPG" /></figure>
  </div>

  <div class="content__item">
  <figure><img src="images/sakura.JPG" /></figure>
  </div>

  <div class="content__item">
  <figure><img src="images/yama.JPG" /></figure>
  </div>

  </div>

</div>

なんてことはない､HTMLです｡wrapperで全体囲み､contentでitemを囲んでいます｡wrapper→content→itemという流れです｡

名前はCSSのルール内で自由に書いてOKです｡分かりやすいものにしましょう｡

CSS

.wrapper {
  container-type: inline-size;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@container (min-width:400px) {
  .content {
    flex-direction: row;
  }
  .content__item {
    width: calc(33.3333333333% - 10px);
    flex-grow: 1;
  }
}

wrapperにたいして､container-type: inline-sizeを書きます｡これで設定が完了です｡あとは､contentにflexを書きスマホでは縦並びにするので､flex-direction: columnを書きます｡

@container (min-width:400px) {}内にCSSを書きます｡ちなみに､flexの場合､横並びすると､画像の大きさが均等にならない場合があります｡そこで､itemにたいして､widthを決めています｡決め方はcalcを使っています｡

便利ですね｡電卓の必要がありません｡

なお､min-widthは､画面サイズではなくて､コンテナのサイズです｡混乱しがちですが､400pxにしておけば大体は､うまくいきます｡もちろん､このサイトは､ですが｡実際は数値の変更があるでしょう｡

wrapperに書いている､container-type: inline-size;を､contentに書くとエラーが発生しました｡contentにも親要素が必要なようです｡

間違っているかもですが､実際､上のようにしないと無理でした｡

ちなみに､flex-grow: 1;はgapでできる､1番､右端の余白をなくすものです｡flexで気になる場合は､使うといいでしょう｡

そもそも､space-betweenを使えばいいって話ですが(笑)｡ここでは使いませんでした｡正解は1つじゃないので､より良い方法を使うといいでしょう｡

さいごに

今日はこれで1日を使いました｡中々､勉強になりました｡また1つ､賢くなりました｡もちろん､このコードをコピペしても上手くいかないと思います｡環境が異なるので当たり前です｡

ヒントとして活用して頂ければ幸いです｡