flex-box横並びにした後の幅について。flex-shrinkが理解できません。

Question

現在ECサイトを模写しています。
リンク内容
メインのimgとinfoをflexboxで横並びにしています。
ソースコードを確認したところ、imgにmax-widthを400px、flex-shrink: 0;と指定していました。

<div id="item" class="wrapper">
        <div class="item-image">
          <img src="img/item.jpg" alt="">
        </div>

        <div class="item-info">
          <h1 class="item-title">TOTALLY Short Sleeve Shirt</h1>
          <p>
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキスト
          </p>

#item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}

#item .item-image {
  max-width: 400px;
  flex-shrink: 0;
  margin-right: 60px;
}
#item .item-info p {
  margin-bottom: 30px;
  line-height: 1.9;
}

疑問が何点かあります。

①imgとinfoにそれぞれwidthを付けたら見た目はほとんど同じになりました。（imgに50％,infoに43％を指定し、justify-content:space-betweenで間に余白を作りました）
これまで学習してきた中で、flexboxで横並びにした後両者の幅を指定する際、いつも上記のようにwidthで調整して指定していたので今回も同じようにしたのですが、ソースのようにmaxwidthとflex-shrinkを指定する理由は何でしょうか？widthの書き方でも間違いではないのでしょうか？

②上記ソースでmax-widthを400pxと指定していますが、今回模写しているこのサイトの「コンテンツ部分の最大幅は800px」と指定されていたため、その半分の幅としてこの数値が指定されたという認識で正しいのでしょうか？
また、なぜwidthではなくmax-widthなのでしょうか？

③flex-shrink: 0;とあり、画像が縮まないようにとの説明がありました。
flex-shrinkのデフォルト値は1なので、本来ならimgもinfoもどちらも同じだけ（1：1）縮んでしまうのを、imgの方だけは縮ませず、infoの方だけ縮ませるためにこのような指定をしているという認識で正しいのでしょうか？
ブレークポイントは896pxでレスポンシブのレイアウトに変化するのでその手前まで幅を狭くして確かめましたが、infoの方が縮んでいるようには見受けられず、よく理解ができませんでした。
デベロッパーツールでこれを消してみたところ、画像だけがとても小さいサイズになり、それも理由がよくわかりません。

いろいろなサイトで説明を読みましたが、なかなか理解ができません。
すみませんが初心者ですので、わかりやすく教えていただけると幸いです。
どうぞよろしくお願いいたします。

Comments

[Lhankor_Mhy]

Flex の質問タグは、この質問に関係のないものですので外していただきたいと思います。

[pckuma]

承知しました。

Answer 1

①ソースのようにmaxwidthとflex-shrinkを指定する理由は何でしょうか？widthの書き方でも間違いではないのでしょうか？

画像幅を400px以下に、という意図だと思います。
width でパーセンテージ指定した場合は固定幅になるので、スクリーンサイズによってはだいぶ違うレイアウトになるはずです。
よく観察をされることをおすすめします。

---

②上記ソースでmax-widthを400pxと指定していますが、今回模写しているこのサイトの「コンテンツ部分の最大幅は800px」と指定されていたため、その半分の幅としてこの数値が指定されたという認識で正しいのでしょうか？

そのあたりのデザインの意図は本人に聞かないとわからないです。

---

また、なぜwidthではなくmax-widthなのでしょうか？

その意図はデザインした人に聞かないとわからないですが、おそらく縦長画像など画像幅が小さい時に固定幅にして引き延ばしたくたくないからではないですか？
繰り返しになりますが、width: 400pxは常に400px幅ですが、max-width: 400pxは400px以下という意味です。

---

flex-shrinkのデフォルト値は1なので、本来ならimgもinfoもどちらも同じだけ（1：1）縮んでしまうのを、imgの方だけは縮ませず、infoの方だけ縮ませるためにこのような指定をしているという認識で正しいのでしょうか？

はい。
ですが、どちらかというと画像を小さくさせない意図の方が強いでしょう。

---

デベロッパーツールでこれを消してみたところ、画像だけがとても小さいサイズになり、それも理由がよくわかりません。

ご提示のコードだけでは再現しませんでしたが、右カラムに固定幅が存在するならば、そういったふるまいになるはずです。
なぜそうなるかは、「infoの方だけ縮ませるためにこのような指定をしている」というご理解の通りです。

---

もしかすると、flex-shrinkというよりも、width: auto flex-basis: autoのふるまいをご理解されていないのが原因かもしれない、と感じました。

content
flex アイテムの内容物に基づいて、自動的にサイズを決めます。

メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を auto にするのと合わせて auto を使用することで、同等の効果を得られます。

flex-basis - CSS: カスケーディングスタイルシート | MDN

Comments

[pckuma]

分かりやすいご回答ありがとうございます。
大変申し訳ないのですがもう少し質問させてください。

>デベロッパーツールでこれを消してみたところ、画像だけがとても小さいサイズになり、それも理由がよくわかりません。

ご提示のコードだけでは再現しませんでしたが、右カラムに固定幅が存在するならば、そういったふるまいになるはずです。
→コードを再度確認したところ、右カラムに固定幅は指定されていなかったのですが、この2カラムの親要素にmax-width800pxが指定されていたため、flexで横並びにした時この2つのフレックスアイテムを800pxの中に収めるためにimgの方が小さくなっていたのかなぁと思いました。試しにmax-width800pxをはずしてみたところ、横幅いっぱいに横並びで表示され、画像も大きくなりました。この認識で正しいのでしょうか・・・

>また、なぜwidthではなくmax-widthなのでしょうか？

その意図はデザインした人に聞かないとわからないですが、おそらく縦長画像など画像幅が小さい時に固定幅にして引き延ばしたくたくないからではないですか？
繰り返しになりますが、width: 400pxは常に400px幅ですが、max-width: 400pxは400px以下という意味です。

>flex-shrinkのデフォルト値は1なので、本来ならimgもinfoもどちらも同じだけ（1：1）縮んでしまうのを、imgの方だけは縮ませず、infoの方だけ縮ませるためにこのような指定をしているという認識で正しいのでしょうか？

はい。
ですが、どちらかというと画像を小さくさせない意図の方が強いでしょう。

→という事は、このコードだと、「imgは最高で400pxまでしか大きくならない、それ以下は縮小されて表示される」けど、「flex-shrinkを0で指定しているから、実際横幅がせまくなってきても、400px以下にはならない。固定で400px」という事ですかね？
という事は今回のコードでいうとただのwidthでもいいのでは？と考えてしまうのですが間違っていますでしょうか？

＞もしかすると、flex-shrinkというよりも、width: auto flex-basis: autoのふるまいをご理解されていないのが原因かもしれない、と感じました。

おっしゃる通り理解できていません・・。今回の質問とどのように関係があるのかよく分かりません・・もう一度復習したいと思います。

勉強不足で意味の分からないことを質問しているかもしれません。申し訳ございません。

[Lhankor_Mhy]

> 試しにmax-width800pxをはずしてみたところ、横幅いっぱいに横並びで表示され、画像も大きくなりました。この認識で正しいのでしょうか・・・

ご提示のコードで、「この2カラムの親要素」＝#item に max-width を当てて試してみましたが、変化ありませんでした。
ですので、ご理解は違うように思います。

これは想像ですが、おそらくお試しになっているコードでは画像に`width: 100%`などがついているのだと思います。

---

> 「flex-shrinkを0で指定しているから、実際横幅がせまくなってきても、400px以下にはならない。固定で400px」という事ですかね？

違うと思います。
flex-shrink が働くのは、コンテンツ基準サイズが決まってからです。
コンテンツ基準サイズでフレックスアイテムがあふれた時に、縮小を flex-shrink に従って行う、ということです。

ですので、フレックスアイテムが溢れない限り flex-shrink が関わることはないです。
https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink

---

> 今回の質問とどのように関係があるのかよく分かりません

回答にも書きましたが、width: auto; flex-basis: auto; という風に両方をautoにすると特別な効果があります。
つまり、max-width: 400px の代わりに width: 400px を使用すると、その特別な効果が失われるということです。（初期値についてはご理解されていますか？）
ご質問は max-width の代わりに width を使用してはダメなのか、というものでしたので、関係があるかと思います。

[pckuma]

度々分かりやすいご回答ありがとうございます。
理解が追い付かずすみません。

＞これは想像ですが、おそらくお試しになっているコードでは画像に`width: 100%`などがついているのだと思います。

おっしゃる通り、imgに対してmax-width:100%;がついていました。
> 試しにmax-width800pxをはずしてみたところ、横幅いっぱいに横並びで表示され、画像も大きくなりました。
→画像が大きくなったのは親要素の幅いっぱいまで広がったからという事ですね？間違えていたらすみません・・

＞flex-shrink が働くのは、コンテンツ基準サイズが決まってからです。

コンテンツ基準サイズというのは今回でいうとimgのmax-width:400pxと、infoのwidth(コードでwidthの指定はなかったため、親要素に指定されているmax-width:800pxからimgの400pxを引いた数値）という認識で正しいでしょうか？

＞コンテンツ基準サイズでフレックスアイテムがあふれた時に、縮小を flex-shrink に従って行う、ということです。
ですので、フレックスアイテムが溢れない限り flex-shrink が関わることはないです。

こちらの回答を読み、もう一度コードを確認してみました。
テストのためブレークポイント896px以下のレスポンシブレイアウトをいったん白紙に戻し、画面幅を少しずつ狭くしていったところ、imgは400pxのままで、infoだけが縮んでいきました。（infoのみflex-shrinkが効いているからですね？）
画面横幅が620pxを下回るくらいからどんどんinfo部分が見切れていき、最終的にはなくなりimgだけ残りました。
これがおっしゃってるフレックスアイテム（info）があふれてflex-shrinkが働いた状態という認識で正しいでしょうか？

また、Googlechromeでは画像の表示範囲まで画面幅を狭くすることができなかったため、IEで画面幅をもっと狭くしていったところ、画像は400pxを下回ると見切れていきました。これはflex-shrinkを0に指定しているため縮むことはないから、という事でしょうか？
max-widthなので400px以下になったら画像は縮小するものだと思っていました。

＞つまり、max-width: 400px の代わりに width: 400px を使用すると、その特別な効果が失われるということです。（初期値についてはご理解されていますか？）

理解できていません。勉強不足なので学習しますm(__)m

ご迷惑かとは思いますが、すべてのコードを添付させていただきます。
説明＆コード記載不足もあり色々とご迷惑をおかけしてすみません。
理解不足で本当にすみません。

<body>
<header id="header">
<div class="site-title">
<a href="index.html"><img src="img/logo.svg" alt="TOTALLY"></a>
</div>

<nav class="wrapper">
<ul class="menu">
<li><a href="#">ALL</a></li>
<li><a href="#">NEW</a></li>
<li><a href="#">VINTAGE</a></li>
<li><a href="#">CATEGORY</a></li>
<li><a href="#">LOOKBOOK</a></li>
<li><a href="#">BLOG</a></li>
</ul>
<ul class="login">
<li><a href="#">LOGIN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>

<main>
<div id="item" class="wrapper">
<div class="item-image">
<img src="img/item.jpg" alt="">
</div>

<div class="item-info">
<h1 class="item-title">TOTALLY Short Sleeve Shirt</h1>
<p>
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキスト
</p>

<p>￥9,999 +tax</p>

<table class="order-table">
<thead>
<tr>
<th class="color">Color</th>
<th class="size">Size</th>
<th class="quantity"></th>
</tr>
</thead>
<tbody>
<tr>
<td>White</td>
<td>S</td>
<td>
<select name="quantity_s">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>White</td>
<td>M</td>
<td>
<select name="quantity_m">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>White</td>
<td>L</td>
<td>
<select name="quantity_l">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</tbody>
</table>

<a class="cart-btn" href="#">ADD TO CART</a>

<table class="size-table">
<thead>
<tr>
<th class="size">Size</th>
<th class="chest">Chest</th>
<th class="weist">Weist</th>
<th class="height">Height</th>
</tr>
</thead>
<tbody>
<tr>
<th>S</th>
<td>99 ～ 99</td>
<td>99 ～ 99</td>
<td>99 ～ 99</td>
</tr>
<tr>
<th>M</th>
<td>99 ～ 99</td>
<td>99 ～ 99</td>
<td>99 ～ 99</td>
</tr>
<tr>
<th>L</th>
<td>99 ～ 99</td>
<td>99 ～ 99</td>
<td>99 ～ 99</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>

<footer id="footer" class="wrapper">
<p class="copyright">&copy; TOTALLY</p>
</footer>
</body>
</html>

html {
font-size: 100%;
}
body {
color: #333;
font-size: 0.75rem;
font-family: 'Raleway', sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
max-width: 100%;
}
li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.site-title {
width: 109px;
line-height: 1px;
margin: 0 auto 36px auto;
}
.site-title a {
display: block;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
max-width: 1000px;
padding: 46px 0 26px 0;
margin: 0 auto 50px auto;
border-bottom: solid 1px #c3c3c3;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
nav .menu,
nav .login {
display: flex;
align-items: center;
}
nav .menu li {
margin-right: 14px;
}
nav .login li {
margin-left: 14px;
}

/*-------------------------------------------
商品ページ
-------------------------------------------*/
#item {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
/*
flex-shrink: 0;
画像が縮小されるのを防ぐ
*/
#item .item-image {
max-width: 400px;
flex-shrink: 0;
margin-right: 60px;
}
#item .item-info p {
margin-bottom: 30px;
line-height: 1.9;
}
/*
「display: flex;」と「align-items: center;」で、
高さを中央にそろえる
*/
#item .item-info .item-title {
height: 60px;
display: flex;
align-items: center;
border-top: solid 1px #c3c3c3;
border-bottom: solid 1px #c3c3c3;
font-size: 1rem;
font-weight: bold;
margin-bottom: 20px;
}
#item .item-info .order-table {
width: 100%;
margin-bottom: 20px;
}
#item .item-info .order-table .color,
#item .item-info .order-table .size {
width: 20%;
}
#item .item-info .order-table .quantity {
width: 60%;
}
/*
テーブルの線は重ならないように設定（外枠なしのレイアウト）
１．tdの上を設定
*/
#item .item-info .order-table td {
border-top: solid 1px #c3c3c3;
}
/*
２．th、tdの右を設定
*/
#item .item-info .order-table th,
#item .item-info .order-table td {
font-weight: normal;
padding: 10px;
border-right: solid 1px #c3c3c3;
text-align: center;
}
/*
３．th、tdの最後だけ右の線を消す
*/
#item .item-info .order-table th:last-child,
#item .item-info .order-table td:last-child {
border-right: none;
}
/*
-moz-appearance: menulist;
-webkit-appearance: menulist;
セレクトボックスに右端の矢印を表示
*/
#item .item-info .order-table select {
width: 100%;
border: solid 1px #c3c3c3;
padding: 0 10px;
-moz-appearance: menulist;
-webkit-appearance: menulist;
}
#item .item-info .cart-btn {
width: 100%;
background-color: #4B4B4B;
color: #fff;
display: block;
line-height: 1;
padding: 18px 0;
margin-bottom: 30px;
text-align: center;
}
/*
テーブルの線は重ならないように設定（外枠ありのレイアウト）
１．テーブルの上と左に設定
*/
#item .item-info .size-table {
width: 100%;
border-top: solid 1px #c3c3c3;
border-left: solid 1px #c3c3c3;
}
#item .item-info .size-table .size {
width: 16%;
}
#item .item-info .size-table .chest,
#item .item-info .size-table .weist,
#item .item-info .size-table .height {
width: 28%;
}
#item .item-info .size-table th {
background-color: #ecebeb;
}
/*
２．th、tdの右と下に設定
*/
#item .item-info .size-table th,
#item .item-info .size-table td {
font-weight: normal;
padding: 10px;
border-right: solid 1px #c3c3c3;
border-bottom: solid 1px #c3c3c3;
text-align: center;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
padding: 10px 0;
}
#footer .copyright {
font-size: 0.625rem;
text-align: center;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 896px) {

.site-title {
margin-bottom: 26px;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
margin-bottom: 0;
border-bottom: none;
padding: 36px 16px 16px 16px;
}
/*
横スクロールできるようにする
*/
nav {
overflow-x: scroll;
}

/*-------------------------------------------
商品ページ
-------------------------------------------*/
#item {
flex-direction: column;
}
#item .item-image {
max-width: 100%;
margin: 0 0 10px 0;
}
#item .item-info {
padding: 0 16px;
}
}

[Lhankor_Mhy]

> おっしゃる通り、imgに対してmax-width:100%;がついていました。

え、それが最小サイズに影響を与えるとは知らなかったです。パーセンテージ指定だからかな？
勉強になりました。

---

> 画像が大きくなったのは親要素の幅いっぱいまで広がったからという事ですね？

ご理解の通りだと思います。

---

> コンテンツ基準サイズというのは今回でいうとimgのmax-width:400pxと、infoのwidth(コードでwidthの指定はなかったため、親要素に指定されているmax-width:800pxからimgの400pxを引いた数値）という認識で正しいでしょうか？

それはちょっと違うと思います。
この場合は、.item-image の画像サイズと、.item-info が無限の広さのボックス上で表示された時の横幅、になるはずです。
これは、.item-info の一番長い要素、たぶん「テキストテキスト……」だと思いますが、この文字列を少し減らしてみると、flex-shrink:0 を消したときの画像の縮小率が変わることで確認できるはずです。

ですが、この仕様はややこしいので、厳密に理解しなくてもいいと思います。（私も結構あいまいです）
もし興味があるならば、MDNの記述もあいまいなので、仕様書を読むしかないと思います。
https://drafts.csswg.org/css-flexbox-1/

---

> これがおっしゃってるフレックスアイテム（info）があふれてflex-shrinkが働いた状態という認識で正しいでしょうか？

ご理解の通りでいいと思います。

> 画像は400pxを下回ると見切れていきました。これはflex-shrinkを0に指定しているため縮むことはないから、という事でしょうか？
max-widthなので400px以下になったら画像は縮小するものだと思っていました。

ご理解の通りです。max-width は最大を制限するものですので小さくなる分には制限がありません。

[pckuma]

長々と質問にお付き合いいただき本当にありがとうございました。
分かりやすいご回答のおかげで、ある程度は理解できたつもりです・・。
ご迷惑をおかけしてすみません。ありがとうございました。

[Lhankor_Mhy]

迷惑ではないですよ！
「どうしてこうなるのか」を気にすることはコードを書く上で大切だと思いますので、どうぞご遠慮なく。