calc()が理解出来ない

Question

現在clac()メソッドについて学習中なんですがどうしても理解できません。
足し算等をする事が出来るのだけは理解できました。

しかし写真の横に文字を入れたりする場合もどうやらcalc()メソッドを使うらしいですが全く理解出来ません。

HTML

<div class="PRODUCT">
        <h2>PRODUCT</h2>
        <div class="photo">
        <img class="Pamphlet" src="img/パンフレット①.png">
        <div class="guide">The World Festival Guide -海外の<br>音楽フェス完全ガイド-</div>
        <img class="Pamphlet" src="img/パンフレット②.png">
        <div class="guide">この世界で死ぬまでにしたいこと<br>2000</div>
        <img class="Pamphlet" src="img/パンフレット③.png">
        <div class="guide">365日日本一周 絶景日めくり<br>カレンダー</div>
        <img class="Pamphlet" src="img/パンフレット④.png">
        <div class="guide">PASSPORT NOTEBOOK series</div>
        <img class="Pamphlet" src="img/パンフレット⑤.png">
        <div class="guide">ひとり旅英会話BOOK</div>
        <img class="Pamphlet" src="img/パンフレット➅.jpeg">
        <div class="guide">日本の絶景ポストカード&nbsp;春編</div>
      </div>
    </div>

     

```ここに言語を入力
コード

PRODUCT{
& h2{
margin-left:54px;
}

& .photo{
display: flex;
flex-wrap: wrap;
align-items: center; /* 上下中央揃え /
/ align-items:flex-end; 下揃え */
width: calc(40% + 200px);

& .Pamphlet{
  width:calc(100% - 260px);
  margin-bottom:30px;
}
& .guide{
  width:260px;
   
}

}
}

![引用テキスト](a12766392e637a79dd7821f294c0e87f.png)

この文字は何がどうなって写真の横に配置されたんでしょうか？

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

>写真の横に文字を入れたりする場合もどうやらcalc()メソッドを使うらしいですが
これは「ケースバイケース」だと思います。

[yambejp]

CSSで入れ子処理をしていますがSASSか何かですか？
（直接は関係ないですがこまかいtypoでclacとなっている箇所があります）

[NTRCFWggg]

scssです。

[kai0310]

添付していただいてる画像が見づらいのですが修正していただけますでしょうか？

Answer 1

文字が写真の横に配置されているのはflexプロパティを使用しているからです。
そして写真の横に文字を入れるのにcalcを使っているのは横幅を計算しているからです。

.PRODUCT .photo .Pamphlet {
  width: calc(100% - 260px);
}

.PRODUCT .photo .guide {
  width: 260px;
}

width: calc(100% - 260px);は画像の横幅を計算（親要素の幅(100%)からテキストの横幅(260px)を引いた値）しています。
これでflexによって横並びになった画像とテキストがきっちり収まる幅となります。