BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件

2022-01-15 09:36:33

これは2カラムレイアウトの案件でよく使われるもので、いろいろなやり方があるのですが

しかし、最も便利なのはやはりフレックスで、外側の親要素に display:flex を設定し、子要素（適応的な幅を持つ要素）に
flex-grow:1;を設定し、もう一方は固定幅、もう一方はアダプティブ幅を設定して行っています。

具体的なコードは以下の通りです。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex width not in effect</title>
</head>
<body>
  <style>
    /* Reset styles */
    * {
      margin: 0px;
      padding: 0px;
    }
    /* Set the outer display to flex */
    .box {
      display: flex;
      height: 100px;
      width: 100%;
    }
    /* left adaptive */
    .box .left {
      flex-grow: 1;
      background: red;
    }
    /* right fixed */
    .box .right {
      width: 200px;
      background: yellow;
    }
  </style>
  <! -- Outer box -->
  <div class="box">
    <! -- left side -->
    <div class="left"></div>
    <! --right -->
    <div class="right"></div>
  </div>
</body>
</html>

このコードは上のスクリーンショットのように動作しますが、小さなバグがあります。つまり、左（適応側）の中にコンテンツがあり、その幅が左の幅を超えると、右（固定幅）を小さく圧迫してしまい、与えた固定幅（例では200px）が機能しなくなったり、スクロールバーが表示されたりすることが分かります。
左側に少しコンテンツを追加して、幅を超えるようにするのです。 

   /* Out of width content style */
    .box .left .content {
      width: 1000px;
    }


  <! --left -->
    <div class="left">
      <! -- beyond -->
      <div class="content"></div>
    </div>

実行中の結果です。

コンテンツがはみ出し、スクロールバーが表示される。この問題は、leftの上にoverflow hidden属性を追加すれば解決します。 

  /* left adaptive */
    .box .left {
      flex-grow: 1;
      background: red;
      overflow: hidden;
    }

しかし、もうひとつ問題があります。右側は出てくるのですが、幅が200以下と小さいのです。
この問題は実はとても簡単で、右のdiv（右側）にmin-width:200px;を追加すれば完璧です。 

/* right fixed */
    .box .right {
      width: 200px;
      min-width: 200px;
      background: yellow;
    }

これなら、どの画面でも、どのようにドラッグ＆ドロップしても、完全に互換性があります。

今回はcss3でフレックスレイアウトの幅が効かないの解決策について紹介しましたが、もっとフレックスレイアウトの幅が効かないに関連する内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後もよりスクリプトハウスを応援していただけると嬉しいです

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します