CSS3Grund教程

CSS3 Filter(Filters)CSS3 Boxgröße(box-sizing)

CSS3 Elastische Box-Layout

CSS3 flexible Box oder Flexbox ist ein neues Layout-Modell zur Erstellung flexibler Benutzer-Oberflächen-Designs.

Erfahren Sie mehr über das Flex-Layout-Modell

Flexible box, oft als Flexbox bezeichnet, ist ein CSS3Eines neuen Layout-Modells, das in CSS eingeführt wurde, um flexible Benutzer-Oberflächen-Designs mit mehreren Zeilen und Spalten zu erstellen, ohne Prozente oder feste Längenwerte zu verwenden.3 Das Flex-Layout-Modell bietet ein einfaches und mächtiges Mechanismus, um die Raumverteilung und das Ausrichten von Inhalten durch das Stilblatt automatisch zu verwalten, ohne die tatsächliche Markierung zu stören.

Dieser Beispiel zeigt, wie man mit dem Flex-Layout-Modell eine dreispaltige Anordnung erstellt, bei der die Breite und Höhe jedes Spalts gleich sind.

Beispiel

<!DOCTYPE html>
<html lang="en">

<head>-8<meta charset="utf
">3　<title>CSS/Three Equal Flex Column<
title>
　　　　.flex-container　{
　　　　　　　　width:　80%;
　　　　　　　　min-height:　300px;
　　　　　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　　　　　display:　flex;　
　　　　　　　　border:　1px　solid　#80808<style>
　　　　}
　　　　.flex-container div　{
　　　　　　　　background:　#dbdfe5;
　　　　　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　　　　　-0;-flex:　1;　/*　ms　10　*/
　　　　　　　　flex:　1;　
　　　　}
Item/IE
Item/style>　1head>Item　2head>Item　3Item/<

Testen Sie es heraus‹/›

html>-Wenn Sie sich die obige Beispielcode genau ansieht, werden Sie bemerken, dass wir nicht in der .flexInneren des Containers<div>-drittel des Containers. Auf der Oberfläche wird jedoch jedes Spaltenbreite genau der Breite des übergeordneten Elements.flex

Wie das Flex-Layout funktioniert

Flexbox besteht aus Flex-Behältern und Flex-Projekten. Man kanndisplayDie Eigenschaft "display" der Elemente wird auf "flex" (ähnlich zublock Flex-Behälter) oder inline-flex (ähnlich zuinline-blockdurch die Eigenschaft "inline Flex-Container" (z.B. inline-Flex-Container) erstellt werden. Alle Kinder des flexiblen Behälters werden automatisch zu flexiblen Elementen und mit dem Flex-Layout-Modell layoutiert.float,clearundvertical-alignEigenschaften haben keinen Einfluss auf flexible Elemente.

Die verstellbaren Elemente entlang dieserflex-directionDie durch die Eigenschaft指定的Flexlinie befindet sich im Flex-Behälter. Standardmäßig hat jeder Flex-Behälter nur eine Flexlinie, deren Richtung der Inline-Achse des aktuellen Schreibmodus oderTextrichtungDie nachstehende Abbildung hilft Ihnen, die Begriffe des Flex-Layouts zu verstehen.

Bestimmen Sie den Fluss im Inneren des Flex-Behälters

In der Standard-CSS-Rahmenmodell werden Elemente normalerweise in der Reihenfolge angezeigt, in der sie im unterliegenden HTML-Code auftreten. Das Flex-Layout ermöglicht es Ihnen, die Richtung des Flusses in einem Flex-Behälter zu steuern, so dass Elemente in jede Flussrichtung wie links, rechts, nach unten oder sogar nach oben gelegt werden können.

Man kannflex-directionDie Eigenschaft bestimmt den Fluss der flexiblen Elemente im Flex-Behälter. Der Standardwert row entspricht der aktuellen Schreibrichtung oder Textdirection, z.B. Englisch von links nach rechts.

Beispiel

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction: row-reverse;
　　　　border:　1px　solid　#666;
}

Testen Sie es heraus‹/›

Ähnlich können Sie in einem flexiblen Behälter Elemente in Spaltenform darstellen, anstatt flex zu verwenden-Der Wert der direction-Eigenschaft ist Zeile, wie im folgenden gezeigt:

Beispiel

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: column;
　　　　
　　　　display:　flex;
　　　　flex-direction: column;
}

Testen Sie es heraus‹/›

Steuerung der Größe der verstellbaren Elemente

Der wichtigste Aspekt des flexiblen Layouts ist die Fähigkeit der flexiblen Elemente, ihre Breite oder Höhe zu ändern, um den verfügbaren Raum zu füllen. Dies wird durchflexdurch Eigenschaften realisiert. Dies sind Kurzeigenschaftenflex-grow,flex-shrinkaberflex-basisEigenschaft.

Der elastische Behälter verteilt den verfügbaren Raum proportional zum Elastizitätsfaktor auf seine Elemente oder zieht sie zusammen, um Überläufe zu verhindern, die proportional zum Biegekontraktionsfaktor sind.

Beispiel

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　display:　flex;　
}
.flex-container div　{
　　　　padding:　10px;
　　　　background:　#dbdfe5;
}
.item1,　.item3　{
　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　flex:　1;　
}
.item2　{
　　　　-webkit-flex:　2;　/*　Safari　*/
　　　　flex:　2;　
}

Testen Sie es heraus‹/›

In dem obigen Beispiel werden der erste und der dritte Flex-Projekt den1/4, das ist1/(1+1+2freien Raum, und der zweite Flex-Projekt wird den1/2, das ist2/(1+1+2freien Raum. Ähnlich können Sie mit dieser einfachen Technik andere flexible Layouts erstellen.

Hinweis:Es wird dringend empfohlen, die Kurzwahlattribute anstelle der einzelnen Flex-Attribute zu verwenden, da diese die nicht angegebenen Komponenten korrekt zurücksetzen können.

Flex-Elemente im Flex-Container ausrichten

Es gibt vier Attributejustify-content,align-content,align-itemsundalign-selfZiel ist es, die Ausrichtung der Flex-Elemente im Flex-Container zu spezifizieren. Die ersten drei sind für Flex-Container und der Letzte für ein einzelnes Flex-Element geeignet.

Flex-Elemente entlang der Hauptachse ausrichten

Verwenden Sie justify-Das content-Attribut kann die Flex-Elemente entlang der Hauptachse des Flex-Containers (d.h. in der horizontalen Richtung) ausrichten. Es wird normalerweise verwendet, wenn die Flex-Elemente nicht den gesamten verfügbaren Raum der Hauptachse ausfüllen.

justify-Das content-Attribut akzeptiert die folgenden Werte:

flex-Anfang-Standardwert. Flex-Elemente werden am Anfang der Hauptachse positioniert.
flex-Ende -Die Flex-Elemente befinden sich am Ende der Hauptachse.
Mitte　　- Die Flex-Elemente werden in der Mitte der Hauptachse positioniert, wobei gleiche freie Räume an beiden Enden vorhanden sind. Wenn der verbleibende freie Raum negativ ist, d.h. das Element überfließt, werden die flexiblen Elemente in beide Richtungen gleichmäßig überfließen.
Raum-zwischen　-Die Flex-Elemente sind entlang der Hauptachse gleichmäßig verteilt, wobei das erste Element am Hauptanfang und das letzte am Hauptende positioniert wird. Wenn die Elemente überfließen oder nur ein Element vorhanden ist, ist dieser Wert gleich flex-start.
Raum-umgeben　-Flex-Elemente sind an beiden Enden mit gleicher Hälfte des Raums gleichmäßig verteilt. Wenn sie überfließen oder nur ein Element vorhanden ist, ist dieser Wert gleich center.

Der folgende Beispiel zeigt Ihnen verschiedene justify-Die Auswirkung der content-Attributwerte auf Flex-Container mit festen Breiten und mehreren Spalten.

Beispiel

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-justify-content: space-around;
　　　　
　　　　display:　flex;
　　　　justify-content: space-around;
}
.item1　{
　　　　width:　75px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　background: #2f97ff;
}

Testen Sie es heraus‹/›

Flex-Elemente entlang der Querachse ausrichten

verwendet werden kann-items oder align-self-Eigenschaft gleicht Flex-Elemente entlang der Querachse des Flex-Containers (d.h. in der vertikalen Richtung) aus. Allerdings, wenn Sie align-items, wenn sie auf den Flex-Container angewendet werden, diese align-Die self-Eigenschaft wird auf einzelne Flex-Elemente angewendet und überschreibt align-Elemente. Beide Attribute akzeptieren die folgenden Werte:

flex-Anfang —Flex-Elemente befinden sich am Anfang der Querachse.
flex-Ende —Flex-Elemente befinden sich am Ende der Querachse.
Mitte　—Fleksierte Elemente werden in der Mitte der Querachse positioniert und haben gleiche verfügbare Räume an beiden Enden. Wenn der verbleibende freie Raum negativ ist, d.h. das Element überfließt, werden die flexiblen Elemente in beide Richtungen gleichmäßig überfließen.
Grundlinie　—每个弹性项目的文本基准（或内联轴）与最大的弹性项目的基线对齐font-size.
Stretch —Die dehnbaren Projekte dehnen sich aus, um die aktuelle Zeile oder Spalte zu füllen, es sei denn, sie werden durch die Mindest- und Maximalbreite oder Höhe verhindert. align-Die Standardwerte der Eigenschaft items.

Nachfolgender Beispiel zeigt verschiedene align-Die Wertigkeit der Eigenschaft items beeinflusst den Einfluss auf fix hochgelegene flexiblen Spaltencontainer.

Beispiel

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-align-items: center;
　　　　
　　　　display:　flex;
　　　　align-items: center;
}
.item1　{
　　　　width:　75px;
　　　　height:　100px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　height:　200px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　height:　150px;
　　　　background: #2f97ff;
}

Testen Sie es heraus‹/›

Sie können auch den verfügbaren Raum auf der Querachse mehrzeiliger oder mehrspaltiger flexibler Container verteilen. Die Eigenschaft align-content wird verwendet, um die Zeilen eines flexiblen Containers auszurichten, z.B. wenn es auf der Querachse mehr Platz gibt, werden die Zeilen im mehrzeiligen flexiblen Container justify-content-Ausrichtung, ähnlich wie das Ausrichten eines einzelnen Elements entlang der Hauptachse.

Diese align-Die Eigenschaft content akzeptiert denselben Wert wie justify-content, aber es wird auf die Querachse anstatt auf die Hauptachse angewendet. Es akzeptiert auch einen anderen Wert:

StretchDer verfügbare Raum wird zwischen allen Zeilen oder Spalten gleichmäßig aufgeteilt, um die Kantenlänge zu erhöhen. Wenn der verbleibende freie Raum negativ ist, ist dieser Wert gleich dem Wert von flex-start.

Nachfolgender Beispiel zeigt verschiedene align-Der Wert der Eigenschaft content beeinflusst den Einfluss auf fix hochgelegene flexiblen Container.

Beispiel

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　margin: 0 auto;
　　　　font-size:　32px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-flow: row wrap;
　　　　-webkit-align-content: space-around;
　　　　
　　　　display:　flex;
　　　　flex-flow: row wrap;
　　　　align-content: space-around;
}
.flex-container div　{
　　　　width:　150px;
　　　　height:　100px;
　　　　background:　#dbdfe5;
}

Testen Sie es heraus‹/›

die Reihenfolge der verschiedenen Flex-Objekte neu sortieren

Neben dem Ändern des Flusses im Flex-Container können Sie auch ändernorderDie Eigenschaft zeigt die Reihenfolge eines einzelnen flexiblen Elements an. Dieser Eigenschaftswert akzeptiert positive oder negative Ganzzahlen. Standardmäßig werden alle flexiblen Elemente gemäß ihrer Reihenfolge in der HTML-Markierung angezeigt und ausgelegt, da der Standardwert von order 0 ist.

Nachfolgender Beispiel zeigt Ihnen, wie Sie die Reihenfolge eines einzelnen flexiblen Elements angeben

Beispiel

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}
.flex-container div　{
　　　　padding:　10px;
　　　　width:　130px;
}
.item1　{
　　　　background: #e84d51;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　background: #7ed636;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　background: #2f97ff;
　　　　-webkit-order:　-1;　/*　Safari　6.1+　*/
　　　　order:　-1;
}

Testen Sie es heraus‹/›

Hinweis:Objekte mit der niedrigsten Ordnungsnummer werden vorne und die mit der höchsten Ordnungsnummer hinten platziert. Objekte mit gleicher Ordnungsnummer werden in der Reihenfolge angezeigt, in der sie im Quelldokument auftreten.

Horizontale und vertikale Ausrichtung von Flexbox

In der Regel beinhaltet die vertikale Ausrichtung von Inhaltssäulen die Verwendung von JavaScript oder einigen einfacheren CSS-Techniken. Mit Flexbox kann dies jedoch einfach erreicht werden, ohne dass Anpassungen erforderlich sind.

Nachfolgender Beispiel zeigt Ihnen, wie Sie CSS verwenden3Die Flexbox-Funktion ermöglicht eine einfache Vertikale und horizontale Ausrichtung von Inhaltssäulen in der Mitte.

Beispiel

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;　
}
.item　{
　　　　width:　300px;
　　　　padding:　25px;
　　　　margin: auto;
　　　　background: #f0e68c;
}

Testen Sie es heraus‹/›

启用弹性项目换行

Standardmäßig zeigt der flexible Container nur eine Zeile oder eine Spalte der Flexelemente an. Aberflex-wrapWenn es auf einer Flexachse nicht genügend Platz gibt, können Sie mit den Attributen des Flex-Containers angeben, ob das Flex-Element in mehrere Zeilen umgebrochen wird.

Derflex-Die wrap-Eigenschaft akzeptiert die folgenden Werte:

nowrap-Standardwert. Flexelemente werden in einer Zeile platziert. Wenn es auf der Flexachse nicht genügend Platz gibt, kann dies zu einem Überlauf führen.
wrap —Der Flex-Container teilt seine Flex-Elemente in mehrere Zeilen auf, ähnlich wie Text, der zu breit ist, um in die aktuelle Zeile zu passen, in eine neue Zeile übertragen wird.
wrap-reverse —Flexelemente werden bei Bedarf umgebrochen, aber in umgekehrter Reihenfolge, d.h.,Kreuzungspunkt(cross-start)undKreuzungsende(cross-end)Die Richtungen wechseln.

Nachfolgender Beispiel zeigt Ihnen, wie Sie flex-Die wrap-Eigenschaft zeigt Flex-Elemente in einer oder mehreren Zeilen innerhalb eines Flex-Containers an.

Beispiel

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　wrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　wrap;　　
}
.flex-container　div{
　　　　width:　130px;
　　　　padding:　10px;　　　　
　　　　background:　#dbdfe5;
}

Testen Sie es heraus‹/›

Hinweis:Sie können auch abgekürzte CSS-Attribute in einer einzigen Anweisung verwendenflex-flowflexzuweisen-directionundflex-wrap。Es akzeptiert Werte, die mit den jeweiligen Attributen identisch sind, und die Werte können in beliebiger Reihenfolge sein.

CSS3 Filter(Filters)CSS3 Boxgröße(box-sizing)