Warum bekomme ich beim Verwenden von Flex -Layout horizontale Scrollbar -Probleme? Wie kann ich das Problem lösen, dass Daten nicht vollständig angezeigt werden können?

Analyse und Lösung für das Problem horizontaler Schriftrollenstangen, die durch das Nistflex -Layout verursacht werden

Wenn Sie das Flex-Layout für die Verschachtung von mehrschichtigen Schichten verwenden, stoßen Sie häufig auf horizontale Scroll-Balkenprobleme. Selbst wenn Sie nach links nach links scrollen, können die Daten nicht vollständig angezeigt werden. Dieser Artikel analysiert die Hauptursache des Problems und liefert Lösungen anhand von Code -Beispielen.

Codebeispiele und Problemanalyse

Der folgende Code zeigt ein Szenario, in dem horizontale Scrollbar -Probleme auftreten:

<div class="container">
  <div class="cmp-main">
    <div class="cmp-core">
      <div class="process-core">
        <div class="item-wrap">
          <div class="item">Kopf</div>
        </div>
        <div class="item-wrap">
          <div class="item-condition">
            <div class="condition">
              <div class="item-wrap">
                <div class="item">Daten 1</div>
                <div class="item">Daten 2</div>
                <div class="item">Daten 3</div>
                <div class="item">Daten 4</div>
                <div class="item">Daten 5</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.Container {Margin: 80px; Breite: Auto; }
.cmp-main {display: flex; Überlauf: Auto; Flex-Richtung: Säule; Ausrichtung: Zentrum; Position: Relativ; Breite: 100%; }
.cmp-core {Hintergrundfarbe: #f5f5f7; Position: Relativ; Anzeige: Flex; Flex-Richtung: Säule; Ausrichtung: Zentrum; }
.process-core {display: flex; Flex-Richtung: Säule; Ausrichtung: Zentrum; }
.Item-wrap {display: flex; Flex-Richtung: Säule; Justify-Content: Center; Flex-Wrap: Nowrap; }
.Item {width: 230px; Rand: 5px; Cursor: Zeiger; Grenze: 1px fest Weiß; Hintergrundfarbe: weiß; Border-Radius: 0 0 6px 6px; }
.Item-ondition {Position: relativ; Anzeige: Flex; Flex-Richtung: Säule; Ausrichtung: Zentrum; }
.Kondition {Position: Relativ; Anzeige: Flex; }
.Condition .Item-wrap {Position: relativ; Anzeige: Flex; Flex-Richtung: Reihe; }
.Condition .Item-Wrap .Item {Position: relativ; Anzeige: Flex; Breite: 500px; Höhe: 100px; Grenze: 1px solide Rot; }

Das Problem ist, dass mehrschichtige verschachtelte display: flex zu unnötigen Breitenberechnungen und Einschränkungen führt. Die Breite von .condition .item-wrap wird durch die Gesamtbreite seines untergeordneten Elements bestimmt .item , und die Breite von .item wird durch sein übergeordnetes Element begrenzt, was letztendlich zum Auftreten horizontaler Scroll-Stangen führt.

Lösung

Um dieses Problem zu lösen, müssen wir das überschüssige display: flex und die Elementbreite vernünftig einstellen:

1. Überschüssige display: flex : .cmp-main , .cmp-core , .process-core , .item-wrap , .item-condition display: flex Attribute dieser Elemente sind meist überflüssig, und das Entfernen kann das Layout vereinfachen.

2. Fix .item Element Breite: Verwenden Sie flex: 0 0 500px; anstelle von width: 500px; Um sicherzustellen, dass die Breite des .item -Elements auf 500px festgelegt ist, um zu verhindern, dass die Breite vom übergeordneten Element beeinflusst wird.

3. Steuern Sie die Bildlaufleistenposition: overflow: auto; auf das Element .condition

4. Zentrum den Kopf: Verwenden Sie text-align: center; zentrieren den Kopfinhalt.

Modifizierter CSS -Code:

 .Container {Margin: 80px; Breite: Auto; }
.cmp-main {Flex-Richtung: Spalte; Ausrichtung: Zentrum; Position: Relativ; Breite: 100%; }
.cmp-core {Hintergrundfarbe: #f5f5f7; Position: Relativ; }
.process-core {}
.Item-wrap {Justify-Content: Center; }
.Item {width: 230px; Rand: 5px; Cursor: Zeiger; Grenze: 1px fest Weiß; Hintergrundfarbe: weiß; Border-Radius: 0 0 6px 6px; }
.Item-ondition {Position: relativ; }
.Kondition {Position: Relativ; Überlauf: Auto; } / * Überlauf hinzufügen: Auto hier * /
.Condition .Item-wrap {display: flex; }
.Condition .Item-Wrap .Item {Position: relativ; Anzeige: Flex; Flex: 0 0 500px; Höhe: 100px; Grenze: 1px solide Rot; }
.process-core> .Item-wrap: First-Kind {text-Align: Center; } / * Zentrieren den Header * /

Durch die obigen Modifikationen kann das durch Verschachtel von Flex -Layouts verursachte horizontale Bildlaufleistenproblem effektiv gelöst und die Daten vollständig angezeigt werden. Der Schlüssel ist, die Breite des Flex -Layouts zu verstehen und unnötige Verschachtelungs- und Stilkonflikte zu vermeiden.

Das obige ist der detaillierte Inhalt vonWarum bekomme ich beim Verwenden von Flex -Layout horizontale Scrollbar -Probleme? Wie kann ich das Problem lösen, dass Daten nicht vollständig angezeigt werden können?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!