ミギムキ

[CSS] 画像のサイズに合わせて横に並ぶ文字コンテンツの幅を変える

公開日:2018/09/09 更新日:2019/07/31

やりたいこと

画像と文字を横に並べて表示することがままあります
そんなとき面倒なのが、使用する画像のサイズがマチマチで、ある画像は縦長なのに、ある画像は横長。なんていうとき
そこに共通のスタイルを使うと、幅を広過ぎれば縦長画像は余白が大きすぎるし、幅が狭過ぎれば横長の画像が小さくなってしまいます
ということで、画像のサイズに合わせて文字列の表示領域を自動的に可変して調整してくれるスタイルを検討してみました

サンプルコード

.flex {
    display: flex;
    width: 100%;
}
.flex > .flex_img {
    max-width: 50%;
    margin: 1em 0px 0px 0px;
}
.flex > .flex_text {
    flex: 1;
    margin: 1em 0px 0px 1em;
}

仕組み、解説、補足など

.flex_imgには最大幅を50%ととし、もう片方の.flex_textにはflex: 1;というスタイルを指定しています
flex: 1;と指定することで、その要素の幅をできるだけ引き伸ばす、という動作になります
結果、.flex_imgは画像のサイズ分、もしくは50%の横幅を取り、.flex_textは残った幅の分だけ領域が確保されます
親要素の「width: 100%」がないとIE11でぐしゃっと潰れた見た目になってしまうので注意してください

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。