CSS Flexbox: eindimensionales Layout-Tool

Flexbox, das elastische Box-Layout-Modul, ist ein leistungsstarkes Werkzeug in CSS zum Erstellen von eindimensionalen Layouts wie einer Reihe ?hnlicher Projekte. Es ist besonders für einzelne Zeilen- oder Einzelspalten -Layouts geeignet und kann als zuverl?ssige Alternative zu Netzlayouts in ?lteren Browsern verwendet werden. Dieser Artikel bietet Ihnen einen leicht verst?ndlichen Flexbox-Handbuch.

Trotz des Aufkommens der CSS -Gitterlayouts hat Flexbox immer noch seinen einzigartigen Wert. Obwohl es einige überschneidungen zwischen den beiden gibt, spielen sie im CSS -Layout unterschiedliche Rollen. Im Allgemeinen eignet sich Flexbox besser für eindimensionale Layouts (z. B. eine Reihe ?hnlicher Projekte), w?hrend das Netz für zweidimensionale Layouts (z. B. Elemente der gesamten Seite) besser geeignet ist.

kann Flexbox jedoch auch für vollst?ndige Seitenlayouts verwendet werden. In Browsern, die kein Raster unterstützen, kann es als effektive Alternative zu Gitterlayouts verwendet werden. (W?hrend in den meisten modernen Browsern das Netz schnell verbessert wurde, hat Flexbox immer noch ein breiteres Angebot an Unterstützung, was sehr praktisch ist, wenn Sie Layouts in einigen ?lteren Browsern richtig funktionieren.)

Vorteile von Flexbox

Einige der Vorteile von Flexbox sind:

Der Seiteninhalt kann in eine beliebige Richtung (links, rechts, unten oder sogar nach oben) ausgelegt werden.
Die visuelle Reihenfolge von Inhaltsclips kann umgekehrt oder neu angeordnet werden.
Elemente k?nnen "flexibel" als Reaktion auf den verfügbaren Platz "flexibel" sein und in Bezug auf ihre Beh?lter oder gegenseitig ausgerichtet werden.
Erstellen eines Monospace -Spaltenlayouts (unabh?ngig von der Menge an Inhalten in jeder Spalte) ist sehr einfach.

Um verschiedene Eigenschaften und M?glichkeiten zu veranschaulichen, nehmen wir das folgende einfache Layout als Beispiel für einige Demonstrationen in diesem Artikel an:

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

Der erste Schritt besteht darin, die Elemente in

zu platzieren, d. H. .main und <nav>, und sie nebeneinander anzeigen. Ohne Flexbox k?nnten wir Floats verwenden, um diese drei Elemente zu ordnen, aber dies ist nicht sehr direkt. Darüber hinaus bringen traditionelle Methoden ein bekanntes Problem mit sich: Jede Spalte hat die gleiche H?he wie ihre Inhaltsh?he. Sie müssen also die gleiche H?he für alle drei Spalten einstellen, um sie konsistent zu machen, oder einen Trick verwenden. <aside>

Flexbox entstand.

FlexBox verwenden Der Kern von

flexbox ist der

-Werte des display -attributs, das als Containerelement festgelegt werden muss. Dies verwandelt seine Kinderelemente in "elastische Gegenst?nde". Diese Artikel erhalten standardm??ig einige bequeme Eigenschaften. Zum Beispiel werden sie nebeneinander platziert, und Elemente ohne bestimmte Breite belegen automatisch den verbleibenden Raum. flex

Also, wenn Sie

's auf .main festlegen, drücken seine untergeordneten Elemente automatisch zwischen display und flex. Ist es nicht sehr bequem ohne Berechnungen? Als zus?tzlicher Bonus haben diese drei Elemente auf magische Weise die gleiche H?he. .content

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

Elementreihenfolge: FlexBox order Attribute

Eine andere Eigenschaft von Flexbox ist, dass es einfach ist, die Reihenfolge der Elemente zu ?ndern. Angenommen, Sie haben das obige Layout für den Kunden erstellt und sie m?chte jetzt, dass .content vor <nav> erscheinen.

Normalerweise müssen Sie sich in den HTML -Quellcode eingraben und die Reihenfolge dort ?ndern. Mit Flexbox k?nnen Sie diese Aufgabe vollst?ndig über CSS erledigen. Legen Sie einfach die .content -S -Eigenschaft auf -1 ein und die Inhaltsspalte befindet sich vorne. order

.main {
  display: flex;
}

In diesem Fall müssen Sie den Wert

für andere Spalten nicht explizit deklarieren. order

HTML -Quellcode mit Flexbox unabh?ngig von CSS -Stil

Aber Ihre Kunden sind noch nicht zufrieden. Sie hofft

ist das erste Element auf der Seite, noch vor <footer>. Nun, Flexbox ist wieder Ihr Freund (obwohl es in diesem Fall m?glicherweise besser ist, Ihre Kunden aufzukl?ren, als nur zu gehorchen). Da Sie die internen und externen Elemente neu ordnen müssen, müssen Sie die <header> -Regel für <div> festlegen. Beachten Sie, dass Sie Flex -Container auf einer Webseite nisten k?nnen, um die gewünschten Ergebnisse zu erzielen. Da display: flex, <header> und <main> vertikal gestapelt sind, müssen Sie zuerst einen vertikalen Kontext festlegen, den Sie schnell mit <footer> tun k?nnen. Auch der Wert des flex-direction: column betr?gt -1, sodass er zuerst auf der Seite angezeigt wird. Es ist so einfach. <footer> order

Wenn Sie also eine Reihe von Elementen in eine Spalte oder umgekehrt ?ndern m?chten, k?nnen Sie das Attribut

.main {
  display: flex;
}

.content {
  order: -1;
}

verwenden und auf

oder flex-direction festlegen (column ist der Standard): row row, desto gr??er ist die F?higkeit, desto gr??er ist die Verantwortung: Denken Sie daran, dass viele Besucher die Tastatur verwenden, um Ihre Flexbox-basierte Website zu durchsuchen. Wenn also die Reihenfolge der Elemente im HTML-Quellcode nicht übereinstimmt, übereinstimmt nicht mit der auf der angezeigten Reihenfolge überein Bildschirm, Zug?nglichkeit kann zu einem ernsthaften Problem werden.

wie man Elemente mit Flexbox

ausrichtet Flexbox kann seine Kinder auch sehr direkt horizontal und vertikal ausrichten.

Sie k?nnen

verwenden, um die gleiche Ausrichtung auf alle Elemente innerhalb des Flex -Beh?lters anzuwenden. Wenn Sie für jedes Projekt unterschiedliche Ausrichtungen festlegen m?chten, verwenden Sie

. Die Ausrichtung von Elementen h?ngt vom Wert des align-items -attributs ab. Wenn sein Wert align-self betr?gt (d. H. Die Elemente sind horizontal angeordnet), gilt die Ausrichtung für die vertikale Achse. Wenn flex-direction auf row eingestellt ist (d. H. Die Elemente sind vertikal angeordnet), wird es auf die horizontale Achse angewendet. flex-direction column Sie haben zum Beispiel einige Formen, die Sie im Containerelement unterschiedlich ausrichten m?chten. Sie brauchen:

• Stellen Sie die align-self Eigenschaft jeder Form auf den entsprechenden Wert ein. M?gliche Werte umfassen: center, stretch (Elemente werden so positioniert, dass sie ihren Beh?ltern passen), flex-start, flex-end und baseline (Elemente sind an der Grundlinie ihrer Beh?lter positioniert).
• Stellen Sie das Containerelement auf display: flex fest.
• Achten Sie schlie?lich auf das Attribut flex-direction im übergeordneten Container, da sich der Wert beeinflusst, wie die untergeordneten Elemente ausgerichtet sind.

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

Wenn alle Elemente im übergeordneten Container auf die gleiche Weise ausgerichtet werden müssen, k?nnen Sie das Attribut align-items im übergeordneten Container verwenden. M?gliche Werte umfassen center, flex-start, flex-end, stretch (Standard: Das Element wird so gestreckt, dass er seinen Container entspricht) und baseline (das Element ist an der Grundlinie seines Containers positioniert).

.main {
  display: flex;
}

Verwenden Sie Flexbox, um den Inhalt

auszurichten

Ein weiteres Ausrichtungsattribut ist justify-content, was sehr bequem ist, wenn Sie den verfügbaren Platz zwischen mehreren Elementen gleichm??ig zuweisen m?chten.

Akzeptable Werte umfassen: center, flex-start, flex-end, space-between (es gibt Leerzeichen zwischen den Elementen) und space-around (es gibt vor, zwischen und nach den Elementen).

In der einfachen HTML -Vorlage, die Sie verwendet haben, finden Sie beispielsweise drei Elemente: <main>, <nav> und .content. Derzeit werden sie alle nach links von der Seite gedr?ngt. Wenn Sie m?chten, dass diese drei Elemente irgendwie angezeigt werden, um einen Platz zwischen ihnen zu schaffen, anstatt Spaces am linken und rechten Ende der ersten und letzten Elemente getrennt zu erstellen : <aside> .main justify-content space-between Verwenden Sie die Flexbox, um die Projektgr??e

.main {
  display: flex;
}

.content {
  order: -1;
}

anzupassen

Verwenden Sie das Attribut , Sie k?nnen die L?nge eines Elements relativ zu anderen Elementen im Flex -Beh?lter steuern.

Diese Eigenschaft ist die Abkürzung für jede der folgenden Eigenschaften:

flex

- Eine Zahl, die angibt, wie viel ein Element relativ zu anderen elastischen Elementen w?chst.

• - Eine Zahl, die angibt, wie viel Element im Verh?ltnis zu anderen elastischen Elementen schrumpft. flex-grow
• - Die L?nge des Elements. Zu den akzeptablen Werten geh?ren: flex-shrink,
oder Zahlen, gefolgt von "%", "px", "em" oder einer anderen L?ngeeinheit.
• flex-basis auto zum Beispiel, um drei Spalten Monospace zu erhalten, einfach inherit für jede Spalte festlegen:

Wenn der Inhaltsbereich doppelt so breit wie flex: 1 und

ist, setzen Sie

.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}

für

und lassen Sie die anderen beiden bei 1: <nav> <aside> .content Mehr Ressourcen flex: 2

Schlussfolgerung

Wie Sie sehen k?nnen, kann Flexbox unser Leben erheblich erleichtern, wenn Sie den Ort der Elemente auf Ihrer Website steuern müssen. Es ist sehr zuverl?ssig und macht irgendwelche Tricks, Faltungsbeh?lter oder andere seltsame Dinge, mit denen wir uns jeden Tag befassen müssen.

Wie bereits erw?hnt, ist die bessere Option für vollst?ndige Seitenlayouts heute das CSS -Netz, aber es ist immer noch wert, über den Umfang der Funktionalit?t von Flexbox zu wissen. Flexbox eignet sich am besten zum Ausrichten verwandter Elemente in einer Dimension, kann jedoch auch eine bequeme Alternative zum Gitter sein, das bei Bedarf in ?lteren Browsern funktioniert.

FAQs über CSS Flexbox

(h?ufig gestellte Fragen sollten hier hinzugefügt werden, um mit dem Originaldokument übereinzustimmen)

Das obige ist der detaillierte Inhalt vonEine freundliche Einführung in Flexbox für Anf?nger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!