flex-growが決めた割合がうまく適用されません

Question

前提・実現したいこと

flex-growを使い幅を均等に振り分けたいです。
あるサイトのホームページの模写をしていてつまずきました。
該当サイトのソースコードも確認しつつやっていたのですが、うまくいきませんでした。

該当のソースコード

<div class="content-top">
       <div class="top top-1">
         <h1>届くのは<br>あなたの好みの花だけ</h1>
         <p>FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる2種類のお花から毎回好きなものが選べます。</p>
       </div>
       <div class="top top-2">
         <h1>お花はポストに投函<br>忙しくても大丈夫</h1>
         <p>お花は専用BOXに入れてポストにお届け。不在で受け取れなくても安心して使えます。</p>
       </div>
       <div class="top top-3">
         <h1>FLOWERなら<br>いつでもかわいく飾れる</h1>
         <p>専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。</p>
       </div>
     </div>

.content-top{
 display: flex;
}
.top{
 display: block;
 padding: 8vmin 6vmin;
 min-height: 540px;
 height: 80vh;
 background-repeat: no-repeat;
 background-size: cover;
}
.top h1{
  letter-spacing: 0.2vh;
  color: #fff;
  font-weight: normal;
}
.top p{
  color: #fff;
  font-weight: normal;
  font-size: 2.5vh;
}
.top-1{
  flex-grow: 1;
 background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service01-01ee576583ddad054106d9f2dc78caf78be6c829383351a4fbc99ac5a566020a.jpg);
}
.top-2{
  flex-grow: 1;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service02-cd59d8cd17b05503a9fc3eeae42d618d0cc19b2277b581f5db275d5dde09e94d.jpg);
}
.top-3{
  flex-grow: 1;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service03-4c44f872ed6f7ed3007faeb109b1e03ceabcdb3106ba54392a5457a159a0f2ab.jpg);
}

補足情報（FW/ツールのバージョンなど）

https://flowr.is/

ここが模写に使用させていただいているサイトです。

Answer 1

flexboxの各種プロパティの仕様についてはこちらのサイトがわかりやすいです。以下、ここから引用しながら説明します。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

flex-growは

親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定します。

というものです。記載されているコードの該当の箇所では、そもそも親要素に余ったスペースがないので、伸びる余地がなく、flex-growは意味のない指定になっています。
flex-growを動作させて幅を揃えるには親要素に余ったスペースを作ったうえで、伸びる前から子要素のサイズが揃っている必要があります。（flex-growで指定できるのは伸び率だけで、元の幅には関知しません）
具体的には以下のように書けば揃うはずです。

top {
  width: 10%; /* わかりやすく極端に小さい幅にしてます */
  flex-grow: 1;
}

ちなみに、縮み方を指定するflex-shrinkというものもあります。

flex-grow と逆で、親要素に余ったスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。

flex-growの初期値は0のため、何も設定しなければ要素が勝手に伸びることはありませんが、
flex-shrinkの初期値は1なので、幅が足りなければ勝手に要素は縮みます。
これを利用すれば、親要素からはみ出るように幅を一律に指定するだけで要素の幅は勝手に揃います。
具体的には以下のように書けば揃うはずです。

top {
  width: 100%; /* わかりやすく極端に広い幅にしてます */
  /* flex-shrinkやflex-growを設定する必要はありません */
}

試してみてください。

Comments

[passeri]

「伸びる前から子要素のサイズが揃っている必要があります。（flex-growで指定できるのは伸び率だけで、元の幅には関知しません）」ここの理解が足りていませんでした。問題も解決しました。ご丁寧に教えてくださりありがとうございました。