Właściwości kontenerów Flexbox w CSS | Wyjaśnione

Model układu FlexBox przedstawia sposób na projektowanie responsywnych stron internetowych, a aby to zrobić. Aby współpracować z CSS FlexBox, potrzebujemy kontenera, w którym umieścimy elementy FlexBox, a aby utworzyć kontener FlexBox, musimy użyć właściwości wyświetlacza i ustawić jej wartość jako inline Flex lub Flex. Ponadto CSS zapewnia szeroką gamę właściwości kontenera Flexbox, aby zmienić zachowanie kontenera Flexbox.

Ten zapis obejmie poniżej listy aspektów kontenera CSS Flexbox:

• Co to jest pojemnik Flexbox?
• Właściwości kontenerów Flexbox w CSS
• Jak zaimplementować właściwości kontenerów FlexBox w CSS?

A więc zacznijmy!

Co to jest pojemnik Flexbox

Flex Contener to pudełko/kontener, który może pomieścić wiele elementów Flex, jak pokazano na poniższym rysunku:

Ciemnoniebieski obszar reprezentuje elegancki pojemnik na powyższym fragmencie, a jasnoniebieski obszar reprezentuje elastyczne elementy.

Właściwości kontenerów Flexbox w CSS

CSS zapewnia liczne właściwości kontenera FlexBox, które mogą być używane do różnych celów, jak opisano w poniższych tabelach:

Nieruchomości	Opis
wyświetlacz	Określa rodzaj elest pojemnika i.mi. Wline, blok.
kierunek flex	Określa kierunek elementów w pojemniku, takich jak wiersz, rewers rowerowy itp.
Flex-Wrap	Określa zachowanie pakowania elementów Flexbox I.mi. owinąć czy nie.
Flex Flow	Zapewnia funkcjonalność zarówno elastycznego, jak i kierunkowym flex.
Flex Flow	Zapewnia funkcjonalność zarówno elastycznego, jak i kierunkowym flex.
justify-content	Wyrównuje elementy FlexBox wzdłuż osi głównej.
Wyrównanie	Wyrównuje elementy wzdłuż osi krzyżowej.
Align-Content	Wyrównuje linie pojemnika Flex.
luka	Wyraźnie kontroluje przestrzenie między elementami flex.

właściwość kierunkową Flex w CSS

CSS 3 zapewnia kierunek flex właściwość, której można użyć do określenia kierunku elementów w kontenerze FlexBox. Używając kierunek flex właściwość, możemy określić kierunek elementu od górnego dna, dolnego, lewej i prawej strony.

Składnia

Poniższy fragment zapewni podstawową składnię właściwości CSS Flex-kierunkową:

Kierowanie Flex: Row | Kolumna | Odwrotność wiersza | Reverse-Reverse;

Wartości opisane w powyższym fragmencie można użyć do określenia elementów Flex w poziomie, w pionie, poziomie, ale w odwrotnej kolejności, odpowiednio, pionowo, ale w odwrotnej kolejności.

Flex-Wrap Proper w CSS

Aby owinąć elementy kontenera Flexbox Flex-Wrap Można użyć właściwości. Może wziąć jedną z dwóch wartości i.mi. zawinąć Lub nowrap. Określanie "zawinąć" Wartość zawiera elementy kontenera Flexbox. Jednakże „Nowraph” Wartość zostanie użyta, jeśli nie chcesz owinąć elementów kontenera Flexbox.

Składnia

Poniższy fragment zapewni podstawową składnię właściwości CSS FLEX-WRAP:

Flex-Wrap: Wrap | nowrap | Wrap-Reverse;

Wartości opisane w powyższym fragmencie określają, czy elementy FLEX będą owijane, bez przepisu, czy owijaj odpowiednio w odwrotnej kolejności.

właściwość Flex-Flow w CSS

Flex Flow właściwość można wykorzystać do korzystania z funkcji obu kierunek flex I Flex-Wrap nieruchomości.

Składnia

Poniższy fragment zapewni podstawową składnię właściwości CSS Flex-Flow:

Flex-Flow: Flex-kierunkowy elastyczność;

Justify-Content Property w CSS

Służy do wyrównania elementów kontenera w różnych kierunkach, takich jak start, koniec, środek itp.

Składnia

Poniższy fragment zapewni podstawową składnię właściwości CSS Justify-Content:

Justify-Content: Center | Flex-start | ELEX-end | przestrzeń między | Space-nawet | kosmiczny;

Wartości środka, elest-start i elastyczne są używane odpowiednio do pozycjonowania elastycznych elementów, uruchomienia i końca pojemnika. Wartość pomiędzy przestrzenią określa przestrzeń między elementami flex, a nawet wartość przestrzeni określa równą przestrzeń wokół elementów elastycznych, podczas gdy przestrzeń określa przestrzeń przed, pomiędzy i po flexie.

Własność wyrównania-elementów w CSS

Domyślną wartością tej właściwości jest rozciąganie, które rozciągają elastyczne elementy, aby pasowały do ​​pojemnika.

Składnia

Poniższy fragment pokazuje, jakie wartości może przyjąć właściwość Align-Items:

Wyrównanie: rozciąganie | Flex-start | Centrum | ELEX-end | linia bazowa;

Wartości Flex-Start, Center i Flex-end są używane do ustawienia elementów na początku, środku i na końcu pojemnika, podczas gdy wartość wyjściowa pozycjonuje elementy Flex na podstawie pojemnika.

Własność wyrównana w CSS

Służy do wyrównania linii elastycznych, a jego domyślna wartość to rozciąganie.

Składnia

Poniższy fragment pokaże podstawową składnię właściwości wyrównanej:

Align-Content: rozciągnij | Flex-start | Centrum | ELEX-end | przestrzeń | przestrzeń między;

Nieruchomość GAP w CSS

Wyraźnie kontroluje przestrzenie między elementami flex. Określa rozmiar luki między kolumnami i wierszami.

Składnia

Poniższy fragment pokaże podstawową składnię właściwości wyrównanej:

Gap: Gap kolumny gapie wiary;

Powyższe wartości ustanawiają rozmiar szczeliny odpowiednio między wierszami i kolumnami.

Jak zaimplementować właściwości kontenerów FlexBox w CSS

W tej sekcji wprowadzimy powyższe opisane pojęcia teoretyczne praktycznie.

Przykład

W tym przykładzie zaimplementujemy właściwości wyświetlania, wyrównania, kierunkowość i właściwości GAP:

Kontener Flexbox

Pierwszy element
Drugi element
Trzeci przedmiot
Czwarty przedmiot
Piąty przedmiot

Poniższy fragment wyświetli odpowiednie dane wyjściowe dla powyższego fragmentu kodu:

Powyższe dane wyjściowe uwierzytelnia działanie właściwości kontenerów Flexbox.

Wniosek

Flex Container to pudełko/kontener, który może pomieścić wiele elementów Flex. CSS zapewnia liczne właściwości kontenera FlexBox, które mogą być używane do różnych celów. Na przykład właściwość Display określa rodzaj kontenera Flex; Właściwość kierowania Flex określa kierunek elementów w pojemniku, taki jak wiersz, odwrotność wiersza itp. Ten zapis przedstawia pełny przewodnik dla właściwości kontenerów Flexbox, ich składni i sposobu ich używania w CSS.