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

Drei Scrolling-Effekte für die Benachrichtigungsleiste, implementiert mit reinem CSS

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

Drei Scrolling-Effekte für die Benachrichtigungsleiste, implementiert mit reinem CSS

Detaillierte Erklärung der Box-Größe in CSS3 (Content-Box und Border-Box)

Detaillierte Erklärung der grundlegenden Typen von TypeScript

react-beautiful-dnd implementiert die Drag-and-Drop-Funktion für Komponenten

Webdesign-Tutorial (3): Designschritte und Denkweise

Ubuntu-Grundlagen-Tutorial: apt-get-Befehl

Eine kurze Diskussion über die Simulation von Multithread- und Multiprozess-Abstürzen in Linux

Integrierte Objekte, Werttypen und Referenztypen in JavaScript-Objekten erklärt

So konfigurieren Sie die CDN-Planung mit dem Modul Nginx_geo

Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns

Artikel empfehlen

Was ist DNS-Prefetch? Frontend-Optimierung: DNS-Vorauflösung verbessert die Seitengeschwindigkeit

JS implementiert Array-Filterung von einfacher bis hin zu Multi-Condition-Filterung

8 Tipps für Vue, die Sie nach dem Lesen lernen werden

So wählen Sie die Transaktionsisolationsebene in einem MySQL-Projekt

So lösen Sie das Phantomleseproblem in MySQL

So stellen Sie einen Redis 6.x-Cluster über Docker bereit

Grundlegende Kenntnisse zum MySQL UNION-Operator

Teilen Sie 13 grundlegende Syntax von Typescript

Detaillierte Erläuterung der CSS BEM-Schreibstandards

Eine vollständige Liste häufig verwendeter gemeinsamer Codes für Webseiten (wichtig für das Front-End)

Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen

6 ungewöhnliche HTML-Tags

So implementieren Sie eine MySQL-Datenbanksicherung in Golang

Detaillierte Erläuterung des SSR-Server-Side-Rendering-Beispiels von Vue

Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren