flexで横並びにした要素の幅を指定する(割合)

.yoko{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.yoko1 {
flex-basis: 35%;
}
.yoko2 {
flex-basis: 65%;
}
<div class="yoko">
<div class="yoko1"><img src="https://運動不足.webp" alt="運動不足"></div>
<div class="yoko2"><p>血液は心臓のポンプ作用により全身に運ばれていますが、 実は心臓だけでなく、筋肉の収縮と弛緩の作用にも同じく血液をめぐらせる働きがあります。筋肉は血液を送るポンプの役割があるので、運動不足になると筋力が低下し、血液を送り出す力が不足するため、血流が悪くなります。すると新鮮な酸素や栄養分が十分に伝わらす、疲れやすいうえ、肩こりになりやすい体になってしまいます。</p></div>
</div>

flexで横並びを指定し、子要素にイラストや文字を配置した場合で、子要素の幅(画像とテキストの表示領域の割合)を指定します。

今回は要素が2個ですが、それぞれの要素に幅を指定しています。

コメント

タイトルとURLをコピーしました