Flex-Layout ermöglicht adaptive Seiten (Syntax und Beispiele)

Einführung in Flex Layout

Flex bedeutet auf Englisch flexible Box, was elastische Box bedeutet. Flex-Layout bedeutet flexibles Layout.

Das Flex-Layout bietet große Flexibilität für das Box-Modell. Jeder Container kann als Flex-Layout angegeben werden. Die Einstellungsmethode ist:

.Kasten{
    Anzeige: Flex;
}

Inline-Elemente verwenden Flex-Layout

.Kasten{
    Anzeige: Inline-Flex;
}

Das Webkit-Präfix muss zu Webkit-basierten Browsern hinzugefügt werden

.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
}

Hinweis: Nach der Verwendung des Flex-Layouts werden die Eigenschaften „Float“, „Clear“ und „Vertical-Align“ ungültig.

Grundlegende Konzepte im Flex-Layout

Elemente, die das Flex-Layout verwenden, werden Flex-Container oder kurz „Container“ genannt. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Flex-Elementen oder kurz „Elementen“.

Standardmäßig hat ein Container zwei Achsen: die horizontale Hauptachse und die vertikale Querachse. Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart und die Endposition als Hauptende bezeichnet; die Startposition der Seitenachse wird als Querstart und die Endposition als Querende bezeichnet.

Standardmäßig werden die Elemente entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Hauptachsenraum wird als Hauptgröße bezeichnet, und der eingenommene Seitenachsenraum wird als Quergröße bezeichnet.

Containereigenschaften

1. Flexrichtung
2. Flex-Wrap
3. Flex-Flow
4. Inhalt begründen
5. Elemente ausrichten
6. Inhalt ausrichten

1. Flex-Richtung legt die Anordnungsrichtung der Elemente fest, die Standardeinstellung ist Zeile

Flex-Richtung: Zeile | Zeile umkehren | Spalte | Spalte umkehren
Bei der Einstellung „Flex-Diction: Row“ ergibt sich folgender Effekt:

Bei der Einstellung „Flex-Diction: Row-Reverse“ ist der Effekt:

Bei der Einstellung „Flex-Diction: Column“ ergibt sich folgender Effekt:

Bei der Einstellung „Flex-Diction: Column-Reverse“ ist der Effekt:

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    /*Horizontal, linksbündig*/
    Flex-Richtung: Reihe;
    /*Horizontale Richtung, rechtsbündig*/
    /*Flex-Richtung: Zeile umkehren;*/
    /*Vertikale Richtung, obere Ausrichtung*/
    /*Flex-Richtung: Spalte;*/
    /*Vertikale Richtung, unten ausgerichtet*/
    /*Flex-Richtung: Spalte umkehren;*/
    Hintergrund: #999;
    Breite: 100 %;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
    Breite: 50px;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
</div>

2. Flex-Wrap legt fest, ob die Elemente in derselben Zeile stehen. Der Standardwert ist „Nowrap“.

Flex-Wrap: Wrap | Nowrap | Wrap-Reverse
Bei der Einstellung „Flex-Wrap: Wrap“ ist der Effekt:

Bei der Einstellung „Flex-Wrap: Nowrap“ ergibt sich folgender Effekt (kein Zeilenumbruch, Skalierung standardmäßig):

Bei der Einstellung „Flex-Wrap: Wrap-Reverse“ ergibt sich folgender Effekt (die erste Zeile ist unten):

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    /*Zeilenumbruch*/
    /*flex-wrap: umwickeln;*/
    /*Kein Zeilenumbruch, Standard*/
    /*flex-wrap: jetztrap;*/
    /*Umbrechen, die erste Zeile steht weiter unten*/
    /*flex-wrap: umkehren;*/
    Hintergrund: #999;
    Breite: 100 %;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
    Breite: 50px;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
    <span>Hallo 5</span>
    <span>Hallo 6</span>
    <span>Hallo 7</span>
</div>

3. Das Attribut „flex-flow“ ist eine Kurzform des Attributs „flex-direction“ und des Attributs „flex-wrap“. Der Standardwert ist „row nowrap“

4. Die Eigenschaft justify-content definiert die Ausrichtung des Elements auf der Hauptachse. Der Standardwert ist flex-start

Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte | Abstand dazwischen | Abstand drumherum
Bei der Einstellung „justify-content: flex-start“ ergibt sich folgender Effekt:

Bei der Einstellung „justify-content: flex-end“ ergibt sich folgender Effekt:

Bei der Einstellung „justify-content: center“ ergibt sich folgender Effekt:

Bei der Einstellung „justify-content: space-between“ ergibt sich folgender Effekt:

Bei der Einstellung „justify-content: space-around“ ergibt sich folgender Effekt:

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    /* Standardmäßig werden Elemente linksbündig ausgerichtet */
    Inhalt ausrichten: Flex-Start;
    /*Elemente rechtsbündig ausrichten*/
    /*Inhalt ausrichten: Flex-Ende;*/
    /* Gegenstand zentrieren */
    /*Inhalt ausrichten: zentriert;*/
    /*Elemente an beiden Enden ausrichten*/
    /*Inhalt ausrichten: Abstand zwischen;*/
    /*Gleicher Abstand auf beiden Seiten jedes Elements*/
    /*Inhalt ausrichten: Leerzeichen drumherum;*/
    Hintergrund: #999;
    Breite: 100 %;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
    Breite: 50px;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
    <span>Hallo 5</span>
    <span>Hallo 6</span>
    <span>Hallo 7</span>
</div>

5. Das Attribut align-items definiert die Ausrichtung der Elemente auf der vertikalen Achse. Der Standardwert ist „stretch“, was für Situationen geeignet ist, in denen die Höhen der Elemente auf der vertikalen Achse unterschiedlich sind. Um den Effekt besser zu sehen, habe ich den Elementen einige Stile hinzugefügt.

Elemente ausrichten: Flex-Start | Flex-Ende | Mitte | Grundlinie | Strecken
Bei der Einstellung „align-items: flex-start“ ist der Effekt:

Bei der Einstellung „align-items: flex-end“ ergibt sich folgender Effekt:

Bei der Einstellung „align-items: center“ ergibt sich folgender Effekt:

Bei der Einstellung „align-items: baseline“ ist der Effekt:

Bei der Einstellung „align-items: stretch“ ergibt sich folgender Effekt:

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    /*Oberseite der vertikalen Achse ausrichten*/
    /*Elemente ausrichten: Flex-Start;*/
    /* Untere Ausrichtung der vertikalen Achse */
    /*Elemente ausrichten: Flex-Ende;*/
    /*Den Mittelpunkt der vertikalen Achse ausrichten*/
    /*Elemente ausrichten: zentrieren;*/
    /*Grundlinienausrichtung der ersten Textzeile im Projekt*/
    /*Elemente ausrichten: Grundlinie;*/
    /*Standardausrichtung. Wenn für das Element keine Höhe festgelegt ist oder es auf „Automatisch“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.*/
    Elemente ausrichten: strecken;
    Hintergrund: #999;
    Breite: 100 %;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
    Breite: 50px;
}
.box span:n-ter-Typ(2n){
    Höhe: 80px;
    Polsterung oben: 20px;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
    <span>Hallo 5</span>
    <span>Hallo 6</span>
    <span>Hallo 7</span>
</div>

6. Das Attribut „align-content“ definiert die Ausrichtung mehrerer Achsen. Wenn das Projekt nur eine Rasterlinie hat, ist diese Eigenschaft wirkungslos. (Das heißt, Sie müssen den Flex-Wrap-Eigenschaftswert des Containers auf Wrap festlegen.) (Um den Effekt deutlicher zu machen, habe ich die Höhe des Containers festgelegt.)

Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte | Abstand dazwischen | Abstand drumherum | strecken
Bei der Einstellung „align-content: flex-start“ ergibt sich folgender Effekt:

Bei der Einstellung „align-content: flex-end“ ergibt sich folgender Effekt:

Bei der Einstellung „align-content: center“ ergibt sich folgender Effekt:

Bei der Einstellung „align-content: fspace-between“ ergibt sich folgender Effekt:

Bei der Einstellung „align-content: flex-start“ ergibt sich folgender Effekt:

Bei der Einstellung „align-content: stretch“ ergibt sich folgender Effekt:

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    Flex-Wrap: Umwickeln;
    /*An der Oberseite der vertikalen Achse ausrichten*/
    /*Inhalt ausrichten: Flex-Start;*/
    /*An der Unterseite der vertikalen Achse ausrichten*/
    /*Inhalt ausrichten: Flex-Ende;*/
    /*Am Mittelpunkt der vertikalen Achse ausrichten*/
    /*Inhalt ausrichten: zentriert;*/
    /*An beiden Enden der vertikalen Achse ausrichten*/
    /*Inhalt ausrichten: Leerzeichen zwischen;*/
    /*Der Abstand auf beiden Seiten jeder Achse ist gleich*/
    /*Inhalt ausrichten: Leerzeichen herum;*/
    /*Standardwert, die Achsenlinie nimmt den gesamten Standardwert der Querachse ein, */
    Inhalt ausrichten: strecken;
    Hintergrund: #999;
    Breite: 600px;
    Höhe: 300px;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
    Breite: 50px;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
    <span>Hallo 5</span>
    <span>Hallo 6</span>
    <span>Hallo 7</span>
</div>

Projekteigenschaften

1. Bestellung
2. Flexibel wachsen
3. Flex-Schrumpf
4. Flex-Basis
5. Biegen
6. selbst ausrichten

1. Die Reihenfolge definiert die Reihenfolge, in der die Elemente angeordnet werden. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0.

Im Folgenden wird das erste Attribut auf 10 gesetzt, das zweite auf -1 und das fünfte auf -10. Die Wirkung ist wie folgt

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    Hintergrund: #999;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
}
.box span:n-ter-Typ(1){
    Bestellung: 10;
}
.box span:n-ter-Typ(2){
    Reihenfolge: -1;
}
.box span:n-ter-Typ(5){
    Reihenfolge: -10;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
    <span>Hallo 5</span>
</div>

2. Das Attribut „Flex-Grow“ definiert das Vergrößerungsverhältnis des Elements. Es funktioniert hauptsächlich, wenn die Breite des übergeordneten Elements größer ist als die Summe der Breiten der untergeordneten Elemente. Es definiert, wie die untergeordneten Elemente die verbleibende Breite des übergeordneten Elements verteilen. Der Standardwert ist 0, und die Breite des übergeordneten Elements wird zu diesem Zeitpunkt nicht angefordert.

Wie unten gezeigt, wird der Attributwert „flex-grow“ für das erste untergeordnete Element auf 1 und für das zweite untergeordnete Element auf 1 gesetzt. Dann wird die verbleibende Breite des übergeordneten Elements in drei gleiche Teile geteilt und jeweils dem ersten und zweiten untergeordneten Element hinzugefügt. Der Effekt ist wie folgt:

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    Hintergrund: #999;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
    Breite: 50px;
}
.box span:n-ter-Typ(1){
    Flex-Wachstum: 1;
}
.box span:n-ter-Typ(2){
    Flex-Wachstum: 2;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
    <span>Hallo 5</span>
</div>

Beispiel: Wenn wir im obigen Beispiel davon ausgehen, dass die Breite des übergeordneten Elements 1000 Pixel und die Breite jedes untergeordneten Elements 100 Pixel beträgt, bleiben 500 Pixel übrig. Der Flex-Grow-Wert des ersten untergeordneten Elements ist 1 und der Flex-Grow-Wert des zweiten untergeordneten Elements ist 2. Dann werden die 500 Pixel in drei gleiche Teile aufgeteilt. Das erste untergeordnete Element vergrößert die Breite um 500 mal 1/3 Pixel und das zweite untergeordnete Element vergrößert die Breite um 500 mal 2/3 Pixel.

3. Das Attribut Flex-Shrink definiert das Reduktionsverhältnis des Artikels. Der Standardwert ist 1, was bedeutet, dass der Artikel verkleinert wird, wenn nicht genügend Platz vorhanden ist.

Wenn die Flex-Shrink-Eigenschaft für das Projekt nicht festgelegt ist, beträgt der Standard-Flex-Shrink-Wert des Projekts 1. Wenn nicht genügend Platz vorhanden ist, werden die Elemente proportional verkleinert. Wenn die Flex-Shrink-Eigenschaft eines Elements 0 und die der anderen Elemente 1 ist, wird das Element mit der Flex-Shrink-Eigenschaft von 0 nicht verkleinert, wenn nicht genügend Platz vorhanden ist.

Das Prinzip von Flex-Shrink ähnelt dem von Flex-Grow. Das eine ist nicht schwer zu verstehen, das andere hingegen nicht.

4. Die Eigenschaft „Flex-Basis“ definiert den Spindelraum, den das Element einnimmt, bevor zusätzlicher Raum zugewiesen wird (der Standardwert ist „auto“, was der Originalgröße des Elements entspricht).

Hinweis: Wenn Sie für ein Element sowohl die Eigenschaftswerte „Flex-Basis“ als auch „Breite“ festlegen, überschreibt „Flex-Basis“ den Breitenwert. Wenn Sie beispielsweise die Eigenschaften des Projekts gleichzeitig festlegen, Flex-Basis: 80px, Breite: 100px, dann beträgt die tatsächliche Breite des Projekts 80px.

5. Flex-Attribut

Die Flex-Eigenschaft ist eine Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der Standardwert ist 0 1 auto.

6. align-self-Eigenschaft

Mit der Eigenschaft „align-self“ können einzelne Elemente anders als andere Elemente ausgerichtet werden, wobei die Eigenschaft „align-items“ überschrieben wird. Der Standardwert ist auto, was bedeutet, dass das Attribut align-items des übergeordneten Elements geerbt wird. Wenn kein übergeordnetes Element vorhanden ist, entspricht dies stretch.

Um die Wirkung zu sehen, können Sie den folgenden Code direkt kopieren und als HTML-Datei speichern:

<style type="text/css">
.Kasten{
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    Hintergrund: #999;
    Höhe: 300px;
    Elemente ausrichten: Flex-Start;
}
.box span{
    Rand: 10px 10px;
    Polsterung: 10px;
    Hintergrund: #ff0;
}
.box span:n-ter-Typ(3){
    selbst ausrichten: Ende flexen;
}
</Stil>
<div Klasse="Box">
    <span>Hallo 1</span>
    <span>Hallo 2</span>
    <span>Hallo 3</span>
    <span>Hallo 4</span>
    <span>Hallo 5</span>
</div>

siehe:

[1] http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2] https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

[3] http://blog.csdn.net/qiudw_01/article/details/47061099

[4] https://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

Dies ist das Ende dieses Artikels über die Verwendung von Flex-Layout zum Erstellen adaptiver Seiten (Grammatik und Fälle). Weitere relevante Inhalte für adaptive Flex-Layout-Seiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!