Eigenschaften der Flex-Childs (Kinder-Elemente)
im Flex-Container

order
Eigenschaften für das Flex-Item

CSSBedeutungWerte
order:Reihenfolge der Flex-Kinder kann unabhängig vom HTML-Markup angepasst werden.1; 10; (etc.)

Eigenschaften für den Flex-Container

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

frageantwort
Bring den Artikel mit der Nr. 7 an die erste StelleKlasse Order bei Nr. 6 löschen und im HTML:
7 order
flex-grow
Eigenschaften für das Flex-Item

CSSBedeutungWerte
flex-grow:Vergrößert das Flex-Kind relativ zu den anderen Flex-Kindern. Standardwert ist 0.2;

Eigenschaften für den Flex-Container

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

frageantwort
Alle gelben Artikel sollen relativ zu den anderen größer sein.Klasse flex-grow löschen und bei .gelb einfügen: -webkit-flex-grow: 1; flex-grow: 1;
flex-basis
Eigenschaften für das Flex-Item

CSSBedeutungWerte
flex-basis:Passt die Breite bzw. Höhe auf den "gewünschten" Wert an. Dabei wird das gewohnte CSS Boxmodell angewendet. Je nach flex-direction wird die Breite (row) bzw. die Höhe (column) angepasst. Dient als Bezugspunkt für flex-shrink. Es ist empfohlen mit der Kurzschreibweise flex: zu arbeiten um -grow, -shrink und -basis zusammenfassend anzugeben.40px; auto;

Eigenschaften für den Flex-Container

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

frageantwort
Die Artikel sollen eine Breite von 33px als Basis bekommen.flex-basis: 33px; -webkit-flex-basis: 33px;
flex-shrink
Eigenschaften für das Flex-Item

CSSBedeutungWerte
flex-basis:Passt die Breite bzw. Höhe auf den "gewünschten" Wert an. Dabei wird das gewohnte CSS Boxmodell angewendet. Je nach flex-direction wird die Breite (row) bzw. die Höhe (column) angepasst. Dient als Bezugspunkt für flex-shrink. Es ist empfohlen mit der Kurzschreibweise flex: zu arbeiten um -grow, -shrink und -basis zusammenfassend anzugeben.40px; auto;
flex-shrink: Verkleinert das Flex-Kind relativ zu den anderen Flex-Kindern sobald der Platz nicht ausreicht. Standardwert ist 1.4;

Eigenschaften für den Flex-Container

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

frageantwort
Erhöhe mal den Faktor bei flex-shrinkz.B. auf 10
flex
Eigenschaften für das Flex-Item

CSSBedeutungWerte
flex-grow:Vergrößert das Flex-Kind relativ zu den anderen Flex-Kindern. Standardwert ist 0.2;
flex-basis:Passt die Breite bzw. Höhe auf den "gewünschten" Wert an. Dabei wird das gewohnte CSS Boxmodell angewendet. Je nach flex-direction wird die Breite (row) bzw. die Höhe (column) angepasst. Dient als Bezugspunkt für flex-shrink. Es ist empfohlen mit der Kurzschreibweise flex: zu arbeiten um -grow, -shrink und -basis zusammenfassend anzugeben.40px; auto;
flex-shrink: Verkleinert das Flex-Kind relativ zu den anderen Flex-Kindern sobald der Platz nicht ausreicht. Standardwert ist 1.4;
flex:Praktische Kurzschreibweise für flex-grow, flex-shrink und flex-basis. Dabei sind flex-shrink und flex-basis optional. Der Standardwert ist 0 1 auto,3 1 auto;

Eigenschaften für den Flex-Container

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

frageantwort
Wenn Du bei den Article { flex: 1 1 auto; -webkit-flex: 1 1 auto;} schreibst sind die Artikel nicht bleich breit. Warum ist das so?Weil außerdem die Klasse flex-grow angewendet ist.
align-self
Eigenschaften für das Flex-Item

CSSBedeutungWerte
align-self:Individuelles Verhalten des Flex-Kindes. Die möglichen Werte sind von align-items.auto; flex-start; flex-end; center; baseline; stretch;

Werte für align-self

WertBedeutung
flex-start;Die Flex-Kinder werden oben links beginnend angeordnet. Standard Wert.
flex-end; Die Flex-Kinder beginnen am Ende des Flex-Containers.
center; Die Flex-Kinder werden im Flex-Container zentriert.
baseline;Die Flex-Kinder werden registerhaltig auf der Grundlinie ihrer ersten Zeile angeordnet..
stretch;Die Höhe der Flex-Kinder wird an die Höhe des Flex-Containers angepasst. Das ist der Standard. Stretch gilt also immer so lange Du keine andere Eigenschaft zuordnest.

Eigenschaften für den Flex-Container

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

frageantwort
Die gelben Artikel sollen unten ausgerichtet sein..gelb { align-self: flex-end; -webkit-align-self: flex-end;}
Die gelben Artikel sollen genauso hoch wie die anderen Artikel sein..gelb { align-self: stretch; -webkit-align-self: stretch;}

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit