Flex pojemnik w CSS | Wyjaśnione

Model układu FlexBox zapewnia wydajny i dynamiczny układ elementów, umieszczając je w pojemniku z równie rozłożoną przestrzenią. Ten układ sprawia, że ​​elementy reagują, co oznacza, że ​​elementy zmieniają swoje zachowanie według rodzaju wyświetlania ich urządzenia. Składa się z dwóch elementów, które są eleganckie i elastyczne elementy. Jednak tutaj podkreślymy tylko elastyczne pojemniki. Omówiono badani są.

1. Co to jest pojemnik na flex
2. Flex Container Properties

Co to jest pojemnik na flex?

Jest to element Flexbox, który określa właściwości elementu przodka, ustawiając jego wyświetlacz na flex lub flex.

Wyjaśniono właściwości związane z kontenerem Flex.

Flex Container Properties

Właściwości związane z flex pojemnikiem.

1. Właściwość kierowania flex
2. Flex-Wrap Proper
3. właściwość Flex-Flow
4. Justify-Content Proper
5. właściwość wyrównania-elementów
6. Własność wyrównana

Właściwości te są szczegółowo wyjaśnione poniżej.

Właściwość kierowania flex

W celu ustalenia kierunku elementów obecnych w flexboxu stosuje się właściwość elastycznego kierunku.

Składnia

Kierowanie Flex: Row | Reverse Rowers | Kolumna | Kolumna -Neverse | początkowe | dziedziczyć;

Wyjaśnione parametry

wiersz: Ta domyślna wartość układa elementy poziomo.

Reverse Rowers: Ta wartość umieszcza elementy z rzędu, ale z odwrotnym kierunkiem.

kolumna: Układa elementy pionowo.

odwrotność kolumn: Układa elementy w kolumnie, ale odwrotnie.

Przykład

Poniższy przykład pokazuje działanie właściwości kierunkowej Flex.

Html

Przedmiot 1
Pozycja 2
Pozycja 3
Pozycja 4

Tutaj zagnieżdżliśmy cztery pojemniki Div w większym pojemniku Div i przypisaliśmy mu klasę „Flexbox”.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
kierunek flex: rewalekcja wiersza;

W powyższym kodzie wyświetlamy większy div jako elegancki pojemnik i nadajemy mu trochę koloru, a na koniec jego kierunek jest ustawiony na rewers.

CSS

.Flexbox div
kolor tła: Lightgrey;
szerokość: 150px;
Margines: 15px;
Wyściółka: 20px;
Rozmiar czcionki: 35px;

Teraz stylizujemy nasze przedmioty w pojemniku za pomocą różnych właściwości CSS.

Wyjście

Elastyczne elementy są umieszczane w tym samym rzędzie, ale w odwrotnej kolejności.

Flex-Wrap Proper

Ta właściwość stwierdza, czy elementy powinny być owinięte wokół linii flex, czy nie.

Składnia

Flex-Wrap: Nowraph | Wrap | Reverse owijający | początkowe | dziedziczyć;

Wyjaśnione parametry

nowrap: Ta domyślna wartość nie zawiera elementów.

zawinąć: W razie potrzeby obejmuje elementy.

odwrotność owinięcia: W razie potrzeby obejmuje elementy, ale w odwrotny sposób.

Przykład

Oto, w jaki sposób ta właściwość obejmuje elementy w Flexbox. Aby zobaczyć efekt tej właściwości, musisz zmienić rozmiar okna przeglądarki.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Flex-Wrap: Wrap;

W powyższym kodzie ustawiliśmy właściwość Flex-Wrap. Ta wartość obejmuje elementy wewnątrz pojemnika.

CSS

.Flexbox div
kolor tła: Lightgrey;
szerokość: 150px;
Margines: 15px;
Wyściółka: 20px;
Rozmiar czcionki: 35px;

Korzystając z podstawowych CSS, zaprojektowaliśmy nasze eleganckie przedmioty.

Wyjście

Elementy elastyczne zostały owinięte.

właściwość Flex-Flow

Stwierdza kierunek elementów, jednocześnie określając, czy owinąć elementy, czy nie. Jest to właściwość skrótów do kierowania przepływu i przepływu.

Składnia

Flex-Flow: przepływowy przepływ | początkowe | dziedziczyć;

Wyjaśnione parametry

Kierunek przepływu: Określa kierunek elementów.

przepływ: Stwierdza, że ​​elementy powinny być owinięte, czy nie.

Przykład

Rozważ poniższy przykład, aby zrozumieć działanie tej właściwości.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Flex-Flow: Wrap-Reverse Finer;

Korzystając z właściwości skrótów, ustawiliśmy kierunek elementów Flex jako rewersji wiersza podczas owijania ich za pomocą wartości opakowania.

Wyjście

Przedmioty zostały owinięte rzędami w odwrotny sposób.

Justify-Content Proper

Jeśli elementy w flexbox nie zużywają całkowicie poziomej przestrzeni, właściwość uzasadniania wyrównuje je na osi głównej.

Składnia

Justify-Content: Flex-start | ELEX-end | Centrum | przestrzeń między | przestrzeń | Space-nawet | początkowe | dziedziczyć;

Wyjaśnione parametry

Flex-start: Pozycjonuje elementy na początku kontenera i jest wartością domyślną.

ELEX-end: To umieszcza elementy na końcu pojemnika.

Centrum: To pozycjonuje elementy na środku pojemnika.

przestrzeń pomiędzy: Dodaje przestrzeń między przedmiotami.

kosmiczny: Dodaje przestrzenie przed, między i po każdym elemencie.

przestrzeń-nawet: Daje to każdemu przedmiotowi równe przestrzenie.

Przykład

Załóżmy, że chcesz uzasadnić swoją treść do końca kontenera Flex.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Justify-Content: Flex-end;

Wartość ELEX-end ustawi wszystkie elementy Flex na końcu pojemnika.

Wyjście

Nieruchomość działa poprawnie.

właściwość wyrównania-elementów

Ta właściwość ustawia rozmieszczenie elementów w pojemniku pionowo.

Składnia

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

Wyjaśnione parametry

rozciągać się: Jest to domyślna wartość, która rozciąga elementy do pasowania w pojemniku.

Centrum: To pozycjonuje elementy na środku pojemnika.

Flex-start: Pozycjonuje elementy na początku kontenera i jest wartością domyślną.

ELEX-end: To umieszcza elementy na końcu pojemnika.

linia bazowa: To pozycjonuje elementy na podstawie pojemnika.

Przykład

Tutaj demonstrujemy wartość centralną właściwości wyrównania.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Wysokość: 200px;
Wyrównanie: Center;

Aby właściwie zademonstrować tę właściwość.

Wyjście

Elementy zostały wyrównane pionowo w środku pojemnika.

Własność wyrównana

Zmienia zachowanie właściwości Flex-Wrap i jest prawie podobny do właściwości uzasadnienia treści, z jedyną różnicą jest to, że wyrównuje elementy Flex Veritcally.

Składnia

Align-Content: Flex-start | ELEX-end | Centrum | przestrzeń między | przestrzeń | Space-nawet | początkowe | dziedziczyć;

Wyjaśnione parametry

Flex-start: Pozycjonuje elementy na początku kontenera i jest wartością domyślną.

ELEX-end: To umieszcza elementy na końcu pojemnika.

Centrum: To pozycjonuje elementy na środku pojemnika.

przestrzeń pomiędzy: Dodaje przestrzeń między przedmiotami.

kosmiczny: Dodaje przestrzenie przed, między i po każdym elemencie.

przestrzeń-nawet: Daje to każdemu przedmiotowi równe przestrzenie.

Przykład

Aby zrozumieć, jak działa właściwość wyrównana.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Wysokość: 300px;
Flex-Wrap: Wrap;
Align-Content: Space-Around;

Tutaj dodatkowo zwiększyliśmy wysokość pojemnika, abyś mógł lepiej zrozumieć tę właściwość. Wreszcie, przypisaliśmy właściwość wyrównania wartości przestrzennej wartości.

Wyjście

Przestrzeń wokół każdego przedmiotu została pomyślnie dodana.

Wniosek

Flex Contener, który jest składnikiem Flexboxa definiuje właściwości elementu przodka, ustawiając jego wyświetlacz na flex lub flex-flex. CSS zapewnia wiele właściwości podłączonych do pojemnika Flex i mogą być używane do zdefiniowania charakterystyki pojemnika Flex. Niewiele właściwości połączonych z pojemnikiem Flex to; Kierowanie Flex, Containt Contain, wyrównanie, Flex-Flow itp. Każda z tych właściwości została szczegółowo wyjaśniona wraz z odpowiednimi przykładami.