flexbox内の表示崩れを解消したいです

Question

実現したいこと

PC(1366px),SP(375px)以外での表示崩れを解消したい

ブラウザ幅がある程度長くなった場合、各要素の大きさや長さを固定にして左右の余白を増やすレイアウト（ソリッドレイアウト）にしたいです

・サイズを収縮しても文字の位置が変わらないようにしたいです

ここに質問の内容を詳しく書いてください。
ulで囲ったクラスの中に以下のようにクラスを作っています

<ul class="question-answer"> <li class="pic-com"><img class="question" src="images/q1.jpg" alt=""> <div class="qanda"> <p class="question-1">テキスト</p> <span class="answer">文字が崩れてしまうテキスト</span> </div>

CSSで下のように囲っているのですが
500pxくらいに引き伸ばしてみると
ボックスの中の文字だけが引き伸ばされてしまいます。

（正しい例）
ホワイトニング専用 LEDライトだから
安全ボタンををカットすべく開発された、
当初専用LEDライトを使用するため熱くなく、
また日焼けすることもありません。
↓
（崩れると）
ホワイトニング専用 LEDライトだから安全ボタンををカットすべく開発された、
当初専用LEDライトを使用するため熱くなく、また日焼けすることもありません。

（逆に詰まりすぎたり）
ホワイトニング専用
LEDライトだから
安全ボタンをを
カットすべく開発された、
当初専用LEDライト
を使用するため熱くなく、
また日焼けすることもありません。

リストに指定しているCSS
li.pic-com {
background-color: #fff;
list-style: none;
padding: 10px 1.2rem 15px;
margin-bottom: 21px;
}

※リスト全体はこのように指定しています
.contents_width {
margin: 0 auto;
max-width: 72rem;
width: 100%;
}

初めての質問でかつ、超初心者のため
わかりにくいところが多いと思うのですが
ご協力いただけると助かります。

Comments

[int32_t]

問題をすぐに再現できる HTML と CSS を質問文に含めてください。
codepen や jsfiddle を用意してくれるとより回答しやすいです。

[chogemi]

ご返信いただきありがとうございます！

こちらで確認できますでしょうか？
https://jsfiddle.net/uzcswd5m/1/

部分的に貼り付けたかったのですが
うまく反映されなかったので全体を貼り付けていますm(__)m

よくある質問　の部分と３つのポイント、が特に困っている部分です。

最初に質問した部分に関しては
max-width: デザインカンプで測ったサイズ
margin: auto
でどうにか崩れないようになったようです…自信はないです。

最善案をご提案していただけますと助かります。

[int32_t]

jsfiddle ありがとうございます。

質問文の「崩れ」という表現がよくわかりません。

> ・サイズを収縮しても文字の位置が変わらないようにしたいです

「ページ幅が変わっても、テキストの折返し位置が変化しない」ということでしょうか?

[chogemi]

わかりずらくて申し訳ないです。
おっしゃる通りです！

[chogemi]

inline-blockなど試みましたがうまくいかずです。

[chogemi]

重ねて失礼します
ちなみにこちらがサンプルページです。

https://jsfiddle.net/uzcswd5m/2/

Answer 1

コメント欄のサンプルページではフォントサイズを画面幅に対する相対指定(vw単位)で指定しているので、画面幅に応じてフォントサイズが変更して、折り返し位置が一定になるようになっています。

ただし、フォントサイズには読みやすいサイズがありますので、そのような指定法がいいとは思えません。
サンプルページでは大きなPC画面では文字が大きすぎるし、スマホ画面では文字が小さすぎます。

まずは、PC、タブレット、スマホの各端末で読みやすいフォントサイズを決めて、それを元に他の祖先要素の幅をバランスを考えて決めていくという設計法にすべきだと思います。
適切なフォントサイズが決まれば、次に適切な折り返し幅(大きすぎても小さすぎても読みにくい)を考えて、祖先要素の幅を決める、という順序になります。
PC、タブレット、スマホによって適切なサイズは変わってきますので、メディアクエリでそれぞれ指定するというのが、現在の一般的な主流の設計法です。

Comments

[chogemi]

なるほど。実践的な目線でのアドバイスありがとうございます。参考になりました！

Answer 2

折返し位置が変化してほしくないなら、.answer の横幅を「17em + "A"の幅」で固定にするしかないのでは。そこを固定すると先祖要素の幅の指定もいろいろと変更する必要はありそうです。

手間がかかりすぎるので具体的な助言はできません。

Comments

[chogemi]

そうなんですね。ありがとうございます。

おそらくなんですがサンプルページにブレイクポイントの中間地点の表現として
下記のように指定があったのでこの辺りかなとも思ったのです。

@media screen and (max-width: 1023px) and (min-width: 768px) {
html {
font-size: 1vw;
}
}

@media screen and (max-width: 767px) {
html {
font-size: calc(10 / 375 * 100vw);
}
}

もう少し探ってみようかと思います。
ありがとうございます。