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

Beispiel für automatischen Stoppeffekt nach Text-Scrollen

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

Beispiel für automatischen Stoppeffekt nach Text-Scrollen

Lösung für MySQL-Fehlercode 1862 Ihr Passwort ist abgelaufen

Beispiel für die Verwendung eines negativen Rands zum Erreichen eines durchschnittlichen Layouts in CSS

JavaScript imitiert den Taobao-Lupeneffekt

Detaillierte Erläuterung des Lazy Loading und Preloading von Webpack

Analyse der Prinzipien verschiedener Möglichkeiten zur Nachahmung des Lupeneffekts in CSS3

Schritte zum Aktivieren von TLS in Docker für eine sichere Konfiguration

Tutorial-Diagramm zur Installation von Zabbix2.4 unter Centos6.5

Hinweise zur Verwendung von Textarea

So installieren Sie das MySQL6-Initialisierungsinstallationskennwort unter CentOS7

Artikel empfehlen

Dieser Artikel hilft Ihnen, JavaScript-Variablen und -Datentypen zu verstehen

Detaillierte Erklärung von Promises in JavaScript

Das WeChat-Applet realisiert ein Verknüpfungsmenü

Zusammenfassung der Erfahrungen mit der Verwendung des Div-Box-Modells

Klassifizierung der Farbeigenschaften von Webseiten

Ein Leitfaden zur Optimierung leistungsstarker Websites

Detaillierte Erklärung der MySql-Installation und des Logins

Zwei Ideen zur Implementierung der horizontalen Datenbanksegmentierung

Prinzip und Anwendung der MySQL-Master-Slave-Synchronisation

Detaillierte Erklärung der MySQL-Instanz mit aktiviertem SSD-Speicher

Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?

Diskussion über sinnvollere Erstellungsregeln für MySQL-String-Indizes

Das Prinzip und die Konfiguration des Nginx-Lastausgleichs sowie der dynamischen und statischen Trennung

So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

Einfaches Beispiel für die Verschönerung von HTML-Kontrollkästchen und -Radios