写真とテキストの横並びのレイアウトってよくありますよね。
今ではdisplay: flex; と親要素に充てるだけで簡単に横並びになるありがたいプロパティ。
先日写真とテキストの横並びボックスをリスト化してページに一覧表示させてみたんですが、右側のテキストが多いボックスは左側の写真を押しつぶすように広がり、リストの写真の幅が一定ではなくなってしまいました。
左側にある写真を囲むタグにwidth数値を絶対値で固定してみてもなぜか縮小されてしまう。
そういう仕様だったっけ？
レスポンシブ対応しててブラウザ画面の幅を狭めるとなお潰され写真が消えてしまう状態。
でもちゃんと解決する方法を設定してない自分が悪いんですよねｗ
以下のようにすれば親要素の幅で、左は固定、右は残りの幅いっぱいという横幅設定ができます。その記録。
<div class="container">
<div class="img"><img src="test.jpg" alt=""></div>
<div class="text">テストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト</div>
</div>
<style>
.container {
display: flex;
gap: 1rem; /* box同士の隙間 */
}
.img {
flex: 0 0 auto; /* 幅を固定 */
width: 200px;
}
.right {
flex: 1; /* 残りのスペースを占める */
}
</style>
flexは便利だけど、ちゃんと設定しないと思った機能は発揮しないから最低限のことはしないとですねー