Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts

In diesem Artikel wird hauptsächlich erläutert, wie Elemente mithilfe des CSS3-Flex-Layouts gleichmäßig verteilt werden. Ich werde mir eine Notiz hinterlassen und sie mit Ihnen teilen. Die Einzelheiten lauten wie folgt:

Beispiel 1:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
    <title>Flexibles Layout</title>
  <Stil> 
    *{
      Polsterung: 0;
      Rand: 0;
    }
    Textkörper,html{
      Höhe: 100vh;
      Mindestbreite: 800px;
    } 
    .Container{
      Anzeige: Flex;
      flex-wrap:wrap;
      Anzeige: -webkit-flex; /* Safari */
    }
    .container>.item{
      Rand: 1px tief schwarz;
      biegen: 1; 
      Höhe: 100px;
      Hintergrund: #abcdef;
    }
  </Stil>
</Kopf>
<Text>
  <div Klasse="Container">  
    <div Klasse="Artikel"></div>
    <Hauptklasse="Artikel"></Haupt>
    <div Klasse="Artikel"></div>
  </div>
</body>
</html>

Beispiel 2:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
    <title>Flexibles Layout</title>
  <Stil> 
    *{
      Polsterung: 0;
      Rand: 0;
      Box-Größe: Rahmenbox;
    }
    Textkörper,html{
      Breite: 100 %;
      Höhe: 100vh;
      Mindestbreite: 800px;
      Anzeige: Flex;
      Anzeige: -webkit-flex; /* Safari */
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
    } 
    .Container{
      Breite: 300px;
      Höhe: 300px;
      Anzeige: Flex;
      Anzeige: -webkit-flex; /* Safari */
      Flex-Wrap: Umwickeln;
    }
    .container>.item{
      Flexion: 0 0 33,3 %; 
      Höhe: 100px;
      Hintergrund: #abcdef;
      Rand: 1px durchgehend rot;
    }
    hauptsächlich{
      Flexion: 0 0 33,3 %; 
      Höhe: 100px;
      Hintergrundfarbe: #ccc;
      Rand: 1px durchgehend rot;
    }
  </Stil>
</Kopf>
<Text>
  <div Klasse="Container">  
    <div class="item">links</div>
    <main>Haupt</main>
    <div class="item">richtig</div>
    <div class="item">links</div>
    <main>Haupt</main>
    <div class="item">richtig</div>
    <div class="item">links</div>
    <main>Haupt</main>
    <div class="item">richtig</div>
  </div>
</body>
</html>

flex:0 0 33,3% entspricht flex-basis:33,3%, wodurch die Breite jedes Elements 33,3% des äußeren Containers beträgt und somit in jeder Reihe maximal drei Elemente angeordnet werden können.

flex-wrap:wrap bedeutet, dass jede Zeile automatisch umbrochen wird, wenn sie voll ist.

Beispiel 3:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
    <title>Flexibles Layout</title>
  <Stil> 
    *{
      Polsterung: 0;
      Rand: 0;
      Box-Größe: Rahmenbox;
    }
    Textkörper,html{
      Breite: 100 %;
      Höhe: 100vh;
      Mindestbreite: 800px;
      Anzeige: Flex;
      Anzeige: -webkit-flex; /* Safari */
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
    } 
    .Container{
      Breite: 300px;
      Höhe: 300px;
      Rand: 50px;
      Anzeige: Flex;
      Anzeige: -webkit-flex; /* Safari */
      Flex-Wrap: Umwickeln;
      Inhalt ausrichten: Abstand dazwischen;
    }
    .container>.item{
      Flexion: 0,0 0,30 %; 
      Höhe: 90px;
      Hintergrund: #abcdef;
      Rand: 1px durchgehend rot;
    }
    hauptsächlich{
      Flexion: 0,0 0,30 %; 
      Höhe: 90px;
      Hintergrundfarbe: #ccc;
      Rand: 1px durchgehend rot;
    }
  </Stil>
</Kopf>
<Text>
  <div Klasse="Container">  
    <div class="item">links</div>
    <main>Haupt</main>
    <div class="item">richtig</div>
    <div class="item">links</div>
    <main>Haupt</main>
    <div class="item">richtig</div>
    <div class="item">links</div>
    <main>Haupt</main>
    <div class="item">richtig</div>
  </div>
</body>
</html>

justify-content:space-between bedeutet, dass der zusätzliche Raum in Hauptachsenrichtung gleichmäßig zwischen zwei Elementen verteilt wird.

Damit ist dieser Artikel über Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts abgeschlossen. Weitere Informationen zum gleichmäßigen Verteilen von Elementen mithilfe des Flex-Layouts finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

>>: Detaillierte Ansicht versteckter Spalten in MySQL

So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven

Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts

So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven

Einführung in semantische XHTML-Tags

Methode der Toolbibliothek zur Generierung von Vue-Komponentendokumenten

MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)

Lösung für das Textüberlaufproblem auf CSS-Flex-Basis

Prinzip des MySQL-Indexfehlers

Detaillierte Erklärung der Verwendung und des Unterschieds zwischen nohup und & in Linux

Implementierungsbeispiel für die Bereitstellung von Docker rocketmq

SQL-Implementierung von LeetCode (175. Zwei Tabellen verbinden)

Detaillierte Erläuterung der MySQL Master-Slave-Datenbankkonstruktionsmethode

Artikel empfehlen

Welche magischen Anwendungen haben CSS-Filter?

Tutorial zur HTML-Tabellenauszeichnung (2): Tabellenrahmenattribute BORDER

Das Problem „mmx64.efi nicht gefunden“ tritt bei der Installation des Ubuntu18-Dualsystems auf Win10 auf

Detaillierte Installationsanleitung für das Cloud-Server-Pagoda-Panel

Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank

Beheben Sie das Problem der Kennwortänderung bei der ersten Anmeldung nach der Installation von MySQL 8.0

Detailliertes Tutorial zur Installation von Nacos in Docker und zur Konfiguration der Datenbank

So konfigurieren Sie Nginx zur Rückgabe von Text oder JSON

Detaillierte Einführung in das benutzerdefinierte Docker-Netzwerk

MySQL-Abfrageoptimierung: Eine Tabellenoptimierungslösung für 1 Million Daten

Eine kurze Diskussion über vier Lösungen für Vue Single Page SEO

js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch

Tkinter verwendet JS-Canvas, um Farbverlaufsfarben zu erzielen

js zur Realisierung der Web-Message-Board-Funktion

So geben Sie Speicherplatz unter CentOS 6 oder CentOS 7 frei