Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3

In Projekten wird häufig das zweispaltige Layout verwendet. Es gibt viele Möglichkeiten, diesen Effekt zu erzielen.

Bildbeschreibung hier einfügen

Am bequemsten ist jedoch Flex. Legen Sie display:flex für das äußere übergeordnete Element fest und legen Sie dann die Breite des anzupassenden untergeordneten Elements fest.
Dies kann durch flex-grow:1; und ein weiteres mit der Einstellung einer festen Breite erreicht werden, eines ist fest und das andere ist adaptiv.

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Flex-Breite wird nicht wirksam</title>
</Kopf>
<Text>
  <Stil>
    /* Stil zurücksetzen */
    * {
      Rand: 0px;
      Polsterung: 0px;
    }
    /* Stelle die Anzeige der äußeren Ebene auf Flex ein */
    .Kasten {
      Anzeige: Flex;
      Höhe: 100px;
      Breite: 100 %;
    }
    /* Linke Seite adaptiv*/
    .box .links {
      Flex-Wachstum: 1;
      Hintergrund: rot;
    }
    /* Rechte Seite repariert */
    .box .rechts {
      Breite: 200px;
      Hintergrund: gelb;
    }
  </Stil>
  <!-- Äußerer Kasten -->
  <div Klasse="Box">
    <!-- Links -->
    <div Klasse="links"></div>
    <!-- Rechte Seite -->
    <div Klasse="rechts"></div>
  </div>
</body>
</html>

Das Ergebnis der Ausführung dieses Codes ist wie im Screenshot oben dargestellt, aber dieser Code hat einen kleinen Fehler. Das heißt, wenn sich auf der linken Seite (der adaptiven Seite) Inhalt befindet und die Breite des Inhalts die Breite der linken Seite überschreitet, wird die rechte Seite (feste Breite) kleiner gequetscht und Sie werden feststellen, dass die von Ihnen angegebene feste Breite (200px im Beispiel) nicht wirksam ist oder eine Bildlaufleiste angezeigt wird.
Wir fügen links etwas Inhalt hinzu und lassen ihn über die Breite hinausgehen.

   /*Überschreitung des Inhaltsstils */
    .box .links .inhalt {
      Breite: 1000px;
    }

  <!-- Links -->
    <div Klasse="links">
      <!-- Überschüssiger Inhalt -->
      <div Klasse="Inhalt"></div>
    </div>

Laufergebnisse:

Bildbeschreibung hier einfügen

Der Inhalt überschreitet das Limit und eine Bildlaufleiste wird angezeigt. Dieses Problem lässt sich leicht lösen. Fügen Sie einfach links das versteckte Overflow-Attribut hinzu.

  /* Linke Seite adaptiv*/
    .box .links {
      Flex-Wachstum: 1;
      Hintergrund: rot;
      Überlauf: versteckt;
    }

Bildbeschreibung hier einfügen

Aber das Problem tritt erneut auf. Es erscheint zwar auf der rechten Seite, aber seine Breite wird kleiner und beträgt weniger als 200.
Dieses Problem ist eigentlich ganz einfach. Fügen Sie einfach min-width:200px; zum Div auf der rechten Seite hinzu und es ist perfekt.

/* Rechte Seite repariert */
    .box .rechts {
      Breite: 200px;
      Mindestbreite: 200px;
      Hintergrund: gelb;
    }

Bildbeschreibung hier einfügen

Auf diese Weise ist die Kompatibilität unabhängig davon gewährleistet, welchen Bildschirm Sie verwenden und wie Sie Drag & Drop verwenden. . .

Dies ist das Ende dieses Artikels zur Lösung des Problems, dass die Flex-Layoutbreite in CSS3 nicht wirksam wird. Weitere Informationen zur nicht wirksamen Flex-Layoutbreite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detaillierte Erklärung zur Synchronisierung von Daten von MySQL mit Elasticsearch

>>: Der Browser speichert die relevanten HTTP-Header im Cache, um die Anzahl der HTTP-Anfragen zu minimieren

Mehrere Lösungen für domänenübergreifende Gründe in der Webentwicklung

Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3

Mehrere Lösungen für domänenübergreifende Gründe in der Webentwicklung

Häufig verwendete HTML-Meta-Enzyklopädie (empfohlen)

So fügen Sie dem Tomcat-Dienst einen Java-Startbefehl hinzu

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen

Detaillierte Erläuterung der FTP-Serverkonfiguration und 425-Fehler- und TLS-Warnlösungen für FileZilla Server

So ändern Sie den Speicherort von Datendateien in CentOS6.7 mysql5.6.33

MySQL Master-Slave-Daten sind inkonsistent, Eingabeaufforderung: Slave_SQL_Running: Keine Lösung

Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

TypeScript-Union-Typen, Schnittmengentypen und Typwächter

MySQL 8.0.11 Installationstutorial mit Bildern und Text

Artikel empfehlen

So lösen Sie das Problem, dass der Docker-Container keinen Vim-Befehl hat

Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker

Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL

Erstellen Sie eine Scala-Umgebung unter Linux und schreiben Sie ein einfaches Scala-Programm

So bedienen Sie Datei- und Ordnerberechtigungen unter Linux

Verwendung der MySQL DATE_FORMAT-Funktion

Native Netzwerkanforderungsschema von Vue und Netzwerkanforderungsbibliothek von JS

Richtige Methode zum Laden von Schriftarten in Vue.js

Zusammenfassung der Docker-Datenspeicherung

Detailliertes Tutorial zur automatischen Installation von CentOS7.6 mit PXE

Lassen Sie die Webseite automatisch den Hochgeschwindigkeitsmodus des Dual-Core-Browsers aufrufen (Webkit)

So übertragen Sie Dateien zwischen Windows und Linux

Beispielcode zum Konvertieren von Videos mit der ffmpeg-Befehlszeile

So richten Sie das Terminal so ein, dass Anwendungen nach dem Start von Ubuntu ausgeführt werden

Implementierung eines schwebenden Werbestreifens in HTML und CSS