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

Klicken Sie auf die Schaltfläche, um den Text in ein Eingabefeld umzuwandeln. Klicken Sie auf „Speichern“, um ihn in Textimplementierungscode umzuwandeln.

Klicken Sie auf die Schaltfläche, um den Text in ...

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

HTML-Sprachenzyklopädie

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image

Detaillierte Erklärung der Softwarekonfiguration mit Docker-Compose unter Linux

MySQL-FAQ-Serie: Wann werden temporäre Tabellen verwendet?

Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter

Detaillierte Erläuterung des Anwendungsfalls für MySQL-Fremdschlüssel (FOREIGN KEY)

Natives JS zum Erzielen digitaler Tisch-Spezialeffekte

Beispielcode für CSS, um horizontale Linien auf beiden Seiten des Textes zu erzielen

Installieren Sie JDK1.8 in einer Linux-Umgebung

Artikel empfehlen

Einfaches Beispiel für die Definition und Verwendung von MySQL-Triggern

Detaillierte Analyse der MySQL-Indexdatenstruktur

Werden die erfolgreichsten Unternehmen der Zukunft Technologieunternehmen oder Designunternehmen sein?

Zwei Tools zum Teilen des Bildschirms im Linux-Befehlszeilenterminal

Klicken Sie auf die Schaltfläche, um den Text in ein Eingabefeld umzuwandeln. Klicken Sie auf „Speichern“, um ihn in Textimplementierungscode umzuwandeln.

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Methoden zur Installation und Deinstallation der virtuellen Python-Umgebung sowie aufgetretene Probleme

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

Zeitleistenimplementierungsmethode basierend auf ccs3

Mehrere wichtige MySQL-Variablen

Ansible - Bereitstellungsmethode für automatisierten Betrieb und Wartung für Linux-Systeme

So laden Sie die Kamera in HTML

Detaillierte Erläuterung der Docker Volume-Berechtigungsverwaltung

So verwenden Sie weniger im WeChat-Applet (optimale Methode)

Beispiel für Javascript-Bubblesort