Właściwości Elementy FlexBox w CSS | Wyjaśnione
Ten zapis pomoże ci zrozumieć poniżej listy aspektów elementów CSS Flexbox:
- Elementy FlexBox w CSS
- Właściwości Elementy FlexBox w CSS
- Jak zaimplementować właściwości FlexBox Elementy w CSS
Więc zacznijmy!
Elementy FlexBox w CSS
Podczas tworzenia kontenera Flex w FlexBox, używamy właściwości wyświetlacza i przypisujemy do niej pewną wartość, taką jak Flex, Inline. W tym czasie bezpośrednie dziecko tego eleganckiego pojemnika staje się elementem Flex. Poniższy rysunek zapewni lepsze zrozumienie:
Właściwości Elementy FlexBox w CSS
Poniższa tabela zawiera krótki przegląd właściwości FlexBox:
| 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ę elementu dziecięcego/elastycznego. |
| Flex-basis | Określa początkowe rozmiar elementu dziecięcego/elastycznego. |
| przewód | Jest to właściwość skrótów dla trzech właściwości Flex-Ros, 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 dzieci/elastycznych elementów. |
Jak zaimplementować właściwości FlexBox Elementy w CSS
W tej sekcji omówimy każdą wymienioną powyżej właściwość FlexBox i wdrożymy je praktycznie, aby uzyskać głębokie zrozumienie:
Przykład 1: właściwość zamówienia CSS
Wartość numeryczna wymaga sortowania elementów w określonej kolejności. Poniższy fragment kodu pozwoli ci zrozumieć, jak działa właściwość zamówienia w Flexbox:
Zamów własność
Pierwszy element
Drugi element
Trzeci przedmiot
Czwarty przedmiot
Piąty przedmiot
W powyższym fragmencie kodu wykorzystaliśmy właściwość zamówienia, aby ułożyć elementy FlexBox zgodnie z naszym wyborem:
Dane wyjściowe pokazuje, że właściwość zamówienia ułożyła elementy Flex według kolejności określonej przez użytkownika.
Przykład 2: Właściwość CSS Flex-Rośl
Wymaga wartości liczbowej, która reprezentuje, jak szybko wzrośnie element elastyczny w porównaniu z innymi elementami elastycznej. Aby uzyskać jasność pojęć, rozważmy poniższy kawałek kodu:
Właściwość Flex-Repl
Pierwszy element
Drugi element
Trzeci przedmiot
Czwarty przedmiot
Piąty przedmiot
W tym przykładzie wartość domyślna dla właściwości Flex-Rośla wynosi 0, więc każdy element kontenera będzie odpowiednio wzrastać. Jednak druga i czwarta pozycja kontenera wzrośnie dwanaście razy szybciej niż inne elementy, ponieważ te dwa elementy określiły wartość właściwości Flex-Rośl jako 12:
Powyższy fragment zweryfikował działanie właściwości flex-wzrost.
Przykład 3: właściwość CSS Flex-Basis
W poniższym fragmencie kodu zaimplementujemy właściwość Flex-Basis, aby ustawić rozmiar drugiego i czwartego elementu kontenera:
Nieruchomość Flex-Basis
Pierwszy element
Drugi element
Trzeci przedmiot
Czwarty przedmiot
Piąty przedmiot
Ustawiamy wartość właściwości Flex-Basis jako 150px dla drugiego i czwartego przedmiotu. Powyższy kod wygeneruje następujące dane wyjściowe:
Podobnie możemy wykorzystać inne właściwości elementów FlexBox, aby osiągnąć różne funkcje.
Wniosek
Flex Contener lub element nadrzędny to pudełko/kontener, który zawiera wiele elementów Flex, podczas gdy wszystko w pojemniku Flexbox nazywa się elementem Flexbox lub elementem dziecięcym. Aby utworzyć kontener Flex w FlexBox, używamy właściwości wyświetlacza i przypisujemy ją albo wartość Flex lub Inline; W rezultacie bezpośrednie dziecko tego eleganckiego pojemnika staje się elementem Flex. W CSS dostępnych jest kilka nieruchomości do pracy z elementami FlexBox, takimi jak kontrola zamówienia kolejności elementów Flexbox, Flex-Grow określa współczynnik wzrostu dla elementów Flex itp. W tym artykule obejmowało kilka właściwości FlexBox i wyjaśniono, jak je używać do osiągnięcia ich funkcji.