- ベストアンサー
FlexboxのレシポンシブCSSで困ってます。
- Flexboxのレシポンシブの書き方で困ってます。
- PC版とスマホ版での表示方法がうまくできません。
- 他のCSSの関係上@media screen and (max-width:567px) の書き方は変えずに、PC版では横並びで幅が20%、20%、60%に、スマホ版では画面横一杯に縦並びに表示したいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
flexレイアウトでは、display: flexが指定された要素の子要素の並びを指定することができます。したがって、子要素にdisplay: flexを指定する必要はありません。 また、flex-basisは必ずしも指定した幅で表示されるとは限りません。この場合は単純にwidthを指定するので十分です。 ※OKWAVEの仕様上、コードのインデントを全角スペースで表示していますのでご注意ください。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> .infofl{ display: -webkit-flex; display: flex; padding: 0; width: 100% } .infofl-item1, .infofl-item2{ width: 20%; } .infofl-item3 { width: 60%; } @media screen and (max-width:567px) { .infofl{ display: block; } .infofl > div{ width: 100%; } } </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : green;">フレックスアイテム1</div> <div class="infofl-item2" style="background-color : fuchsia;">フレックスアイテム2</div> <div class="infofl-item3" style="background-color : silver;">フレックスアイテム3</div> </div> </body> </html>
お礼
回答ありがとうございます。お陰様で改善できました。