Model układu CSS Flexbox | Wyjaśnione

Model układu CSS Flexbox | Wyjaśnione
CSS 3 oferuje model układu internetowego o nazwie Model układu CSS Flexbox lub Flexbox. Jak sama nazwa wskazuje, układ FlexBox pozwala nam tworzyć elastyczne/responsywne elementy w kontenerze, które można ułożyć automatycznie w zależności od rozmiaru ekranu. Podsumowując, model układu CSS Flexbox umożliwia projektowanie elastycznych układów responsywnych.

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.