CSS3 Flexbox
Flexible Kästen oder flexbox , ist ein neues Layout - Modus in CSS3.
Die Verwendung von flexbox sorgt dafür , dass Elemente vorhersagbar verhalten , wenn das Seitenlayout unterschiedlichen Bildschirmgrößen und verschiedenen Anzeigegeräten aufnehmen müssen.
Für viele Anwendungen bietet das flexible Box-Modell eine Verbesserung gegenüber dem Blockmodell, dass es schwimmt nicht verwenden, noch die Flex-Container Margen Zusammenbruch mit den Rändern seines Inhalts.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Funktion voll unterstützt.
Zahlen , gefolgt von -webkit- oder -moz- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Konzepte
Flexbox besteht aus flexiblen Behältern und Flex Elemente.
Ein Flex - Container wird durch Setzen des deklarierten display entweder Eigenschaft eines Elements flex (als Block gerendert) oder inline-flex (als Inline gerendert).
Innerhalb eines flexiblen Behälters ist ein oder mehrere Elemente flex.
Hinweis: Alles außerhalb eines flexiblen Behälter und in einem Flex - Element wird wie üblich gemacht. Flexbox definiert, wie flex Elemente sind in einem flexiblen Behälter gelegt.
Flex Elemente sind in einem flexiblen Behälter entlang einer Biegelinie positioniert. Standardmäßig gibt es nur eine Biegelinie pro flex Behälter.
Das folgende Beispiel zeigt drei Flex-Elemente. Sie sind standardmäßig positioniert: entlang der horizontalen Biegelinie, von links nach rechts:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>Es ist auch möglich, die Richtung der Biegelinie zu ändern.
Wenn wir die eingestellte direction Eigenschaft auf rtl ( von rechts nach links), wird der Text von rechts nach links gezogen und auch die Biegelinie ändert die Richtung, die das Seitenlayout wird sich ändern:
Beispiel
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} Flex Richtung
Die flex-direction - Eigenschaft gibt die Richtung der flexiblen Elemente im Inneren der flexiblen Behälter. Der Standardwert von flex-direction ist row ( von links nach rechts, von oben nach unten).
Die anderen Werte sind wie folgt:
-
row-reverse- Wenn der Schreibmodus (Richtung) von links nach rechts, so werden die Flex Elemente gelegt rechts nach links erfolgen -
column- Wenn die Schreibsystem horizontal ist, werden die flexiblen Elemente vertikal verlegt werden -
column-reverse- gleiche wie Spalte, aber umgekehrt
Das folgende Beispiel zeigt das Ergebnis der Verwendung von row-reverse
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von column
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von column-reverse
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Die Rechtfertigung-Content-Eigenschaft
Die justify-content Eigenschaft richtet horizontal die flexiblen Elemente des Containers , wenn die Elemente auf der Hauptachse nicht den gesamten verfügbaren Speicherplatz verwenden.
Die möglichen Werte sind wie folgt:
-
flex-start- Standardwert. Einzelteile werden zu Beginn des Behälters positioniert -
flex-end- Items werden am Ende des Behälters positioniert -
center- Gegenstände sind in der Mitte des Behälters positioniert -
space-between- Gegenstände werden mit dem Raum zwischen den Linien positioniert -
space-around- Gegenstände mit Raum positioniert sind , vor, zwischen und nach den Zeilen
Das folgende Beispiel zeigt das Ergebnis der Verwendung von flex-end - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von center - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von space-between - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung des space-around - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Die align-Eigenschaft Items
Die align-items Eigenschaft richtet vertikal die flexiblen Elemente des Containers , wenn die Elemente auf der Querachse nicht den gesamten verfügbaren Speicherplatz verwenden.
Die möglichen Werte sind wie folgt:
-
stretch- Standardwert. Die Artikel werden gestreckt, um den Behälter zu passen -
flex-start- Gegenstände sind an der Oberseite des Behälters positioniert -
flex-end- Gegenstände werden am Boden des Behälters positioniert -
center- Gegenstände sind in der Mitte des Behälters positioniert (vertikal) -
baseline- Gegenstände werden an der Grundlinie des Behälters positioniert
Das folgende Beispiel zeigt das Ergebnis der Verwendung von stretch - Wert (dies ist der Standardwert):
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von flex-start
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von flex-end - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von center - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von baseline
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Die Flex-Wrap-Eigenschaft
Die flex-wrap - Eigenschaft gibt an, ob die Flex - Elemente wickeln soll oder nicht, wenn es für sie auf eine flexible Linie nicht genug Platz ist.
Die möglichen Werte sind wie folgt:
-
nowrap- Standardwert. Die flexiblen Elemente werden nicht umgebrochen -
wrap- Die flexiblen Elemente wickeln, wenn nötig -
wrap-reverse- Die flexiblen Elemente werden wickeln, falls erforderlich, in umgekehrter Reihenfolge
Das folgende Beispiel zeigt das Ergebnis der Verwendung von nowrap Wert (dies ist der Standardwert):
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung von wrap - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Das folgende Beispiel zeigt das Ergebnis der Verwendung des wrap-reverse - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Der align-Content-Eigenschaft
Der align-content Eigenschaft ändert das Verhalten des flex-wrap - Eigenschaft. Es ist ähnlich wie align-items , sondern flex Elemente auszurichten, richtet es Flexleitungen.
Die möglichen Werte sind wie folgt:
-
stretch- Standardwert. Linien strecken, um den verbleibenden Platz zu nehmen -
flex-start- Linien werden in Richtung der Start des Flex Behälter gepackt -
flex-end- Linien werden gegen Ende des flexiblen Behälter gepackt -
center- Linien werden in Richtung der Mitte des flexiblen Behälter gepackt -
space-between- Linien werden in der flexiblen Behälter gleichmäßig verteilt -
space-around- Linien werden in der Flex - Container, mit halber Größe Räume an beiden Enden gleichmäßig verteilt
Das folgende Beispiel zeigt das Ergebnis der Verwendung von center - Wert:
Beispiel
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} Flex Artikeleigenschaften
Bestellung
Die order Eigenschaft gibt die Reihenfolge eines flexiblen Element im Verhältnis zum Rest der flexiblen Elemente in dem gleichen Behälter:
Beispiel
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} Marge
Einstellung margin: auto; wird besonders viel Platz aufnehmen. Es kann zu schieben flex Elemente in verschiedenen Positionen eingesetzt werden.
Im folgenden Beispiel setzen wir margin-right: auto; auf der ersten Flex Element. Dies bewirkt, dass alle zusätzlichen Platz auf der rechten Seite dieses Elements aufgenommen werden:
Beispiel
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} Perfekte Centering
perfekte Zentrierung: Im folgenden Beispiel werden wir ein fast alltägliches Problem lösen.
Es ist sehr einfach, mit Flexbox. Einstellung margin: auto; das Einzelteil machen perfekt in beiden Achsen zentriert:
Beispiel
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} Ausrichten-Selbst
Die align-self Eigenschaft flex Elemente überschreibt die Flex - Containers align-Elemente Immobilie zu diesem Artikel. Es hat die gleichen möglichen Werte wie die align-items - Eigenschaft.
Das folgende Beispiel setzt verschiedene align-Selbst Werte zu jedem flex Artikel:
Beispiel
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} biegen
Die flex - Eigenschaft gibt die Länge des flexiblen Element, bezogen auf den Rest der flexiblen Elemente in dem gleichen Behälter.
Im folgenden Beispiel wird die erste Flex Artikel 2/4 des freien Raums verbrauchen, und die anderen beiden Flex Elemente werden 1/4 des freien Raumes verbrauchen jeden:
Beispiel
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
Mehr Beispiele
Erstellen Sie eine ansprechende Website mit Flexbox
Dieses Beispiel zeigt, wie eine ansprechende Website-Layout mit Flexbox zu erstellen.
CSS3 Flexbox Eigenschaften
In der folgenden Tabelle sind die CSS-Eigenschaften mit Flexbox verwendet:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |