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

Tutorial zur Installation von VMware Workstation 14 Pro unter Ubuntu 16.04

Detaillierte Erläuterung der Idee, mysqldump + expect + crontab zur Implementierung eines regelmäßigen MySQL-Cold-Backups unter Linux zu verwenden

Artikel

JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board

Detaillierte Erläuterung zur Lösung des Konflikts von Projekt-URLs, der durch das Festlegen des Standardpfads von Tomcat verursacht wird

Vorwort Tomcat ist ein hervorragender Java-Contai...

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

Tutorial zur Installation von VMware Workstation 14 Pro unter Ubuntu 16.04

Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA

Detaillierte Erklärung und Beispiele zur Passwortverschlüsselung für Datenbankkonten

Detaillierte Erläuterung der Idee, mysqldump + expect + crontab zur Implementierung eines regelmäßigen MySQL-Cold-Backups unter Linux zu verwenden

JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board

Beispielüberprüfung MySQL | Update-Feld mit demselben Wert zeichnet Binlog auf

Installieren Sie JDK8 im RPM-Modus auf CentOS7

Verlieben Sie sich in die einfachen CSS-Details, obwohl unbedeutend, können die Effizienz verbessern

So halten Sie eine lange Verbindung aufrecht, wenn Sie den Nginx-Reverse-Proxy verwenden

Artikel empfehlen

Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate

Einführung in die MySQL-Gesamtarchitektur

Vue implementiert ein einfaches Einkaufswagenbeispiel

So verhindern Sie eine Verlangsamung des Computers, wenn unter WIN10 mehrere Datenbanken installiert sind

So verwenden Sie reguläre Ausdrücke, um Platzhalterdomänennamen in Nginx automatisch abzugleichen

Detaillierte Erläuterung zur Lösung des Konflikts von Projekt-URLs, der durch das Festlegen des Standardpfads von Tomcat verursacht wird

Linux-Installationsschritte für Jenkins und verschiedene Problemlösungen (Seitenzugriffsinitialisierungskennwort)

js Array fill() Füllmethode

Gruselige Halloween-Linux-Befehle

uni-app implementiert NFC-Lesefunktion

Tiefgreifendes Verständnis des Slot-Scopes in Vue (für Anfänger geeignet)

Ein vollständiges Tutorial zur Verwendung der Axios-Kapselung in Vue

Backup zwischen MySQL-Datenbank und Oracle-Datenbank importieren

Erläuterung der JavaScript-Funktionssyntax

Einführung in die Bereitstellung des Selenium-Crawler-Programms unter Linux