Q&A
flex-basisが適用されません。
HTML,CSS初心者です。flexboxを使用した際に子要素に<img>を入れるとflex-basisが適用されません。２つの子要素を用意して両方にflex-basis: 50%を設定して幅の半分のサイズで表示したいです。
該当のソースコード
` <body> <div class="box1">テキスト</div> <div class="box2"><img src=""></div> </body> body{ display: flex; } .box1 { flex-basis: 50% } .box2 { flex-basis: 50%; } `
試したこと
divの中身を両方テキストにすると適用されますが、imgを入れるとflex-basisが適用されません。
親要素にjustify-content; space-between;を入れて子要素を30％にしても変わりませんでした。
imgをdisplay: inline-block;にしても変わらず、検索にもヒットせず困っています。
回答1件
0
ベストアンサー
こちらでいかがでしょうか?
CSS
1.box2 img { 2 display: block; 3 max-width: 100%; 4}
もしうまくいかなかったら、以下を試してみてください。
CSS
1.box1 { 2 flex: 0 0 50%; 3} 4 5.box2 { 6 flex: 0 0 50%; 7}
投稿2020/06/01 14:33
編集2020/06/01 14:35
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/02 12:36