こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

FlexboxのレシポンシブCSSで困ってます。

Flexboxのレシポンシブの書き方で困ってます。各クラスのitemをPC版での場合は横並びで幅は20%、20%、60%。スマホ版では各itemが100%の画面横一杯に縦並びに表示したいです。他のCSSの関係上@media screen and (max-width:567px) の書き方は変えないでおきたいのですが上手くできません。
どなたか教えて下さい。宜しくお願いします。
<!DOCTYPE html>
<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 {
display: -webkit-flex;
display: flex;
  flex-basis: 20%;
}
.infofl-item2 {
display: -webkit-flex;
display: flex;
flex-basis: 20%;
}
.infofl-item3 {
display: -webkit-flex;
display: flex;
flex-basis: 60%;
}
@media screen and (max-width:567px) {
.infofl-item1 {
display: block;
}
.infofl-item2 {
display: block;
}
.infofl-item3 {
display: block;
}
}
-->
</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>

投稿日時 - 2019-05-31 14:03:51

QNo.9621783

すぐに回答ほしいです

質問者が選んだベストアンサー

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>

投稿日時 - 2019-06-03 20:45:46

お礼

回答ありがとうございます。お陰様で改善できました。

投稿日時 - 2019-06-03 23:09:14

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問