Eine freundliche Einführung in Flexbox für Anfänger

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:

<code class="language-html"><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></code>

Der erste Schritt besteht darin, die Elemente in

zu platzieren, d. H. .main und <nav></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></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

<code class="language-html"><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></code>

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></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

<code class="language-css">.main {
  display: flex;
}</code>

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></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></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 <code>display: flex, <header></header> und <main></main> vertikal gestapelt sind, müssen Sie zuerst einen vertikalen Kontext festlegen, den Sie schnell mit <footer></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></footer> order Wenn Sie also eine Reihe von Elementen in eine Spalte oder umgekehrt ändern möchten, können Sie das Attribut

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

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.

<code class="language-html"><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></code>

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).

<code class="language-css">.main {
  display: flex;
}</code>

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></main>, <nav></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></aside> .main justify-content space-between Verwenden Sie die Flexbox, um die Projektgröße

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

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

<code class="language-css">.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}</code>

für

und lassen Sie die anderen beiden bei 1: <nav></nav> <aside></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)