Model układu CSS Flexbox | Wyjaśnione
Ten zapis pomoże w następujących aspektach modelu CSS Flexbox:
- Jaki jest model układu CSS Flexbox
- Co to jest pojemnik CSS Flex
- Funkcje modelu FlexBox
- Podstawowa koncepcja modelu układu Flexbox CSS
- Właściwości FlexBox
- Przykłady
Więc zacznijmy!
Jaki jest model układu CSS Flexbox
Jest to elastyczny moduł układu dostępny w CSS3, który oferuje prosty i jasny sposób na ułożenie elementów elastycznych w pojemniku. Pomaga nam w projektowaniu responsywnego układu.
Co to jest pojemnik CSS Flex
Aby pracować z modelem FlexBox, najpierw musimy zrozumieć, czym jest kontener Flex i aby to zrobić, rozważmy poniżej podanie rysunku:
W powyższym fragmencie szary strefa reprezentuje elegancki pojemnik, a pozycja 1, pozycja 2 itp. są jego przedmiotami. Możemy więc powiedzieć, że kontener Flex to pudełko/kontener, który może pomieścić wiele elementów Flex.
Funkcje modelu FlexBox
Model układu CSS Flexbox zapewnia wiele funkcji, niektóre z nich są wymienione poniżej:
- W modelu układu CSS Flexbox nie ma żadnych pływaków.
- CSS Flexbox zapewnia responsywny i przyjazny mobilnik układ.
- Marginesy kontenera Flex nie upadają z marginesem treści.
- Ustawienie elementu dziecka jest bardzo łatwe w modelu Flexbox.
- Zamówienie elementu można łatwo zmienić bez edycji źródła HTML.
Podstawowa koncepcja modelu układu Flexbox CSS
Niektóre z podstawowych koncepcji modelu układu CSS Flexbox są wymienione poniżej:
- Model CSS FlexBox ma możliwość zmiany wysokości i szerokości elementu, aby uzyskać najlepsze dopasowanie w dostępnej wolnej przestrzeni kontenera.
- FlexBox to kierunek-agnostyk, co oznacza, że elementy FlexBox mogą być ułożone zarówno poziomo, jak i pionowo w zależności od wymagań.
Właściwości FlexBox
Aby zaprojektować responsywny układ, w CSS3 dostępna jest szeroka gama właściwości Flex, jak opisano w tabelach poniżej
Tabela 1
| Nieruchomości | Opis |
|---|---|
| wyświetlacz | Określa rodzaj flex pojemnika, i.mi., Wline, blok. |
| kierunek flex | Określa kierunek elementów w pojemniku, takich jak górny dno, lewe itp. |
| Flex-Wrap | Określa, czy elementy powinny być owinięte, czy nie. |
| Flex Flow | Zapewnia funkcjonalność zarówno elastycznego, jak i kierunkowym flex. |
| justify-content | Wyrównuje elementy/elementy 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. |
Tabela 2
| Nieruchomości | Opis |
|---|---|
| zamówienie | Kontroluje kolejność elementów dziecięcych w pojemniku Flex. |
| Flex-Rosch | Określa współczynnik wzrostu dla elementu elastycznego. |
| Flex-Shrink | Określa współczynnik kurczenia się elementów dziecięcych/elastycznych elementów. |
| Flex-basis | Określa domyślny rozmiar elementu dziecięcego/elastycznego. |
| przewód | Służy do osiągnięcia funkcjonalności trzech właściwości i.mi. Flex-Rosch, Flex-Shrink i Flex-Basis. |
| wyrównać jaźń | Umożliwia zastąpienie domyślnego wyrównania (wzdłuż osi krzyżowej) dla poszczególnych elementów dziecka. |
Właściwości opisane w tabeli 1 są znane jako Flex pojemnik Lub element nadrzędny właściwości, podczas gdy te opisane w tabeli 2 są znane jako Elementy elastyczne Lub element dziecięcy nieruchomości.
Przykłady
W tej sekcji praktycznie zaimplementujemy wyżej opisane kontener FlexBox i FlexBox.
Przykład FlexBox
Pierwszy element
Drugi element
Trzeci przedmiot
Czwarty przedmiot
Piąty przedmiot
W powyższym fragmencie kodu wykorzystaliśmy różne właściwości Flex Container i Flex Pozycje, takie jak wyświetlacz, kierunek elastyczne, elementy wyrównane, GAP i Flex, które ustawi wyświetlacz Flex, kierunek rewersacji wierszy, rozciągnięte wyrównanie, wiersze 5px i wiersze 5px i Odpowiednio luka w kolumnach 50px, a trzecia pozycja będzie rosła dwa razy szybciej niż inne elementy:
Wyjście weryfikuje działanie właściwości CSS FlexBox.
Wniosek
Model CSS FlexBox oferuje łatwy i czysty sposób na ułożenie elementów FlexBox w pojemniku. Zapewnia liczne funkcje, takie jak responsywny projekt, proste wyrównanie elementów itp. Ponadto do lepszego projektowania i wyrównania elementów można użyć wielu właściwości, takich jak kierunek elastyczny, flex-wrap, wyrównanie, zamówienie, flex-wzrost itp. W tym artykule omówiono model układu FlexBox, kontener Flex i ich właściwości.