Ten zapis pomoże w następujących aspektach modelu CSS Flexbox:
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:
Podstawowa koncepcja modelu układu Flexbox CSS
Niektóre z podstawowych koncepcji modelu układu CSS Flexbox są wymienione poniżej:
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
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.