Zusammenfassung des CSS3-Flex-Layouts
Im Jahr 2009 schlug W3C eine neue Lösung vor – das Flex-Layout, das einfach und vollständig sein und verschiedene implementieren kann Seitenlayouts responsiv gestalten. Derzeit wird es von allen Browsern unterstützt.
Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um maximale Flexibilität für kastenförmige Modelle zu bieten. Jeder Container kann als Flex-Layout festgelegt werden.
(Empfohlenes Lernen: CSS-Tutorial )
Inline-Elemente können auch das Flex-Layout verwenden.
.box{
display: flex;
}
.box{
display: inline-flex;
}Nach dem Login kopieren
Es ist zu beachten, dass Browser mit Webkit-Kern das Präfix -webkit hinzufügen müssen.
.box{
display: -webkit-flex; /* Safari */
display: flex;
}Nach dem Login kopieren
Außerdem sind nach der Einstellung auf Flex-Layout die Float-, Clear- und Vertical-Align-Attribute von untergeordneten Elementen ungültig.
6 Eigenschaften, die häufig im Flex-Layout verwendet werden
- Flex-Richtung
- Flex-Wrap
- Flex-Flow
- justify-content
- align-items
- align-content
1、flex-direction-Eigenschaft bestimmt die Richtung der Hauptachse ( Das heißt, die Richtung, in der die Elemente angeordnet sind.
.box {
flex-direction: row | row-reverse | column | column-reverse;
}Nach dem Login kopieren
- Zeile (Standardwert): Die Hauptachse ist horizontal und der Startpunkt liegt am linken Ende.
- Zeilenumkehr: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende.
- Spalte: Die Hauptachse ist vertikal und der Startpunkt liegt am oberen Rand.
- Spaltenumkehr: Die Hauptachse ist vertikal und der Startpunkt liegt am unteren Rand.
2. <code>2、<strong>flex-wrap</strong>flex-wrap
Attributdefinition: Wenn eine Achsenlinie nicht angeordnet werden kann, wie wird die Linie umbrochen?
3、<strong>flex-flow</strong>3. Das Attribut <code>flex-directionflex-flowflex-wrap ist die Abkürzung des Attributs row nowrap und des Attributs
und der Standardwert ist
. 4、<strong>justify-content</strong>
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}Nach dem Login kopieren
4, <ul>justify-content<li>-Attribut definiert die Ausrichtung des Elements auf der Hauptachse.
-content: flex-start | flex-end | center | space-between | space-
Nach dem Login kopieren
Flex-Start (Standard): linksbündig
Flex-Ende: rechtsbündig
Mitte: zentriert
Leerzeichen- zwischen: Beide Enden ausrichten, mit gleichem Abstand zwischen den Elementen.
space-around: Jedes Element ist auf beiden Seiten gleichmäßig verteilt. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen den Elementen und dem Rand. 5、<strong>align-items</strong>
6、<strong>align-content</strong> (Standardwert): Wenn das Element keine Höhe festlegt oder auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.
6. Das Attribut <ul>align-content<li> definiert die Ausrichtung mehrerer Achsen. Diese Eigenschaft hat keine Auswirkung, wenn das Projekt nur eine Achse hat.
flex-start.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}Nach dem Login kopieren
Dieses Attribut kann 6 Werte annehmen.
flex-end: Ausgerichtet am Startpunkt der Querachse. center: Ausgerichtet am Endpunkt der Querachse. space-between: Ausgerichtet auf den Mittelpunkt der Querachse. space-around: An beiden Enden der Querachse ausrichten und die Abstände zwischen den Achsen gleichmäßig verteilen. stretch: Jede Achse hat auf beiden Seiten den gleichen Abstand. Daher ist der Abstand zwischen den Achsen doppelt so groß wie der Abstand zwischen den Achsen und dem Rahmen.
(Standardwert): Die Achse nimmt die gesamte Querachse ein. orderflex-growflex-shrinkflex-basisflexalign-self
flex-grow0 Das Attribut order definiert die Reihenfolge, in der Elemente sortiert werden. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0. Das Attribut
.item {
order: <integer>;
}Nach dem Login kopieren
flex-growflex-grow definiert das Vergrößerungsverhältnis des Elements. Der Standardwert ist , d. h. wenn noch Platz vorhanden ist, wird es nicht vergrößert.
.item {
flex-grow: <number>; /* default 0 */}Nach dem Login kopieren
flex-shrinkWenn alle Elemente ein -Attribut von 1 haben, teilen sie den verbleibenden Platz (falls vorhanden) gleichmäßig auf. Wenn das
-Attribut eines Elements 2 ist und die anderen Elemente alle 1 sind, nimmt ersteres doppelt so viel verbleibenden Platz ein wie die anderen Elemente. Das Attribut flex-shrinkflex-shrink
definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, d. h. wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert. <🎜>
.item {
flex-shrink: <number>; /* default 1 */}Nach dem Login kopieren
<🎜>Wenn das <🎜>-Attribut aller Elemente 1 ist und nicht genügend Platz vorhanden ist, werden sie alle proportional reduziert. Wenn das <🎜>-Attribut eines Elements 0 ist und alle anderen Elemente 1 sind, wird ersteres nicht verkleinert, wenn nicht genügend Platz vorhanden ist. <🎜>
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */}Nach dem Login kopieren
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}Nach dem Login kopieren
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
Nach dem Login kopieren
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonZusammenfassung des CSS3-Flex-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
