ネスティングフレックスレイアウトによって引き起こされる水平スクロールバーの問題の分析と解決策

多層ネスティングにフレックスレイアウトを使用する場合、水平方向のスクロールバーの問題に遭遇することがよくあり、左端にスクロールしても、データを完全に表示できません。この記事では、問題の根本原因を分析し、コードの例を介してソリューションを提供します。

コード例と問題分析

次のコードは、水平面のスクロールバーの問題が発生するシナリオを示しています。

<div class="container">
  <div class="cmp-main">
    <div class="cmp-core">
      <div class="process-core">
        <div class="item-wrap">
          <div class="item">頭</div>
        </div>
        <div class="item-wrap">
          <div class="item-condition">
            <div class="condition">
              <div class="item-wrap">
                <div class="item">データ1</div>
                <div class="item">データ2</div>
                <div class="item">データ3</div>
                <div class="item">データ4</div>
                <div class="item">データ5</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.Container {マージン：80px;幅：auto; }
.cmp-main {display：flex;オーバーフロー：自動;フレックス方向：列; Align-Items：Center;位置：相対;幅：100％; }
.cmp-core {background-color：＃f5f5f7;位置：相対;ディスプレイ：Flex;フレックス方向：列; Align-Items：Center; }
.process-core {display：flex;フレックス方向：列; Align-Items：Center; }
.item-wrap {display：flex;フレックス方向：列; justify-content：center;フレックスラップ：nowrap; }
.item {width：230px;マージントップ：5px;カーソル：ポインター;ボーダー：1px固體白。背景色：白。 Border-Radius：0 0 6px 6px; }
.item-condition {position：relative;ディスプレイ：Flex;フレックス方向：列; Align-Items：Center; }
.Condition {position：relative;ディスプレイ：Flex; }
.condition .item-wrap {position：relative;ディスプレイ：Flex; Flex-Direction：row; }
.condition .item-rap .item {position：relative;ディスプレイ：Flex;幅：500px;高さ：100px;境界線：1px固體赤; }

問題は、マルチ層ネストdisplay: flex不必要な幅の計算と制限をもたらすことです。 .condition .item-wrapの幅は、子要素の総幅.itemの幅によって決定され、 .itemの幅はその親要素によって制限され、最終的には水平スクロールバーの外観につながります。

解決

この問題を解決するには、余分なdisplay: flexを削除する必要があります。

1. 余分なdisplay: flex ： .cmp-main 、 .cmp-core 、 .process-core 、 .item-wrap 、 .item-condition display: flex屬性はほとんど冗長であり、それらを削除するとレイアウトを簡素化できます。

2. 修正.item要素幅： flex: 0 0 500px; width: 500px; .item要素の幅が500pxまで固定されていることを確認(rèn)して、親要素の影響を受けないようにします。

3. スクロールバーの位置を制御します： overflow: auto;スクロールバーがデータを含む領(lǐng)域にのみ表示されるように、 .condition要素に。

4. センターヘッド： text-align: center;ヘッドコンテンツを中央に配置します。

変更されたCSSコード：

 .Container {マージン：80px;幅：auto; }
.cmp-main {flex-direction：column; Align-Items：Center;位置：相対;幅：100％; }
.cmp-core {background-color：＃f5f5f7;位置：相対; }
.process-core {}
.item-wrap {justify-content：center; }
.item {width：230px;マージントップ：5px;カーソル：ポインター;ボーダー：1px固體白。背景色：白。 Border-Radius：0 0 6px 6px; }
.item-condition {position：relative; }
.Condition {position：relative;オーバーフロー：自動; } / *オーバーフローの追加：ここに自動 * /
.condition .item-rap {display：flex; }
.condition .item-rap .item {position：relative;ディスプレイ：Flex;フレックス：0 0 500px;高さ：100px;境界線：1px固體赤; }
.process-core> .item-wrap：first-child {text-align：center; } / *ヘッダーの中心 * /

上記の変更により、フレックスレイアウトのネストによって引き起こされる水平スクロールバーの問題を効果的に解決し、データを完全に表示できます。重要なのは、フレックスレイアウトの幅を理解し、不必要なネスティングやスタイルの対立を避けることです。

以上がフレックスレイアウトを使用するときに、水平面のスクロールバーの問題を取得するのはなぜですか？データを完全に表示できない問題を解決する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。