Zajęcia Flexbox w Bootstrap 5 | Wyjaśnione
Ten artykuł dotyczy klas Flex w Bootstrap 5, a następujące punkty omówiono szczegółowo
- Pojemniki Flexbox
- Kierunki FlexBox
- Uzasadnić treść
- Wyrównaj elementy
- Zajęcia owijania
- Wyrównaj siebie
Bootstrap 5 klas Flex
D-flex
W Bootstrap 5 Flex Conteners są tworzone za pomocą użycia .D-flex klasa. D-flex Kontener klas rozszerza się na całą szerokość, co oznacza, że rozszerza się na szerokość ekranu, ale element w nim rozszerza się zgodnie z ich treścią.
Kod
Box1
Box2
Box3
Box4
.D-*-Flex jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Dinline-flex
W Bootstrap 5 Flex Conteners są tworzone za pomocą użycia .Dinline-flex klasa. Dinline-flex Kontener klasowy rozszerza się w zależności od liczby elementów i objętych nim elementy obszaru treści.
Kod
Box1
Box2
Box3
Box4
.D-*-Inline-flex jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Flex Directions
Reverse-Row-Reverse
.Reverse-Row-Reverse Klasa służy do zmiany kierunku elementów w odwrotnej. Ta klasa Flexbox jest używana tylko z .wiersz klasa. Ta klasa będzie również używana z różnymi punktami przerwania
Kod
Box1
Box2
Box3
Box4
.Flex-*-Reverse Rowers jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Flex-kolumna
.Flex-kolumna Klasa służy do konwersji wierszy na kolumny. Ta klasa jest również używana z .wiersz klasa.
Kod
Box1
Box2
Box3
Box4
.Flex-*-kolumna jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Reverse-Column-Reverse
.Reverse-Column-Reverse klasę, przekonwertuj wiersze na kolumny, a także zmień kierunek elementów Flex w odwrotnej. Ta klasa jest również używana z .wiersz klasa.
Kod
Box1
Box2
Box3
Box4
.Flex-*-Reverse Column-Reverse jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Flex-Wrap
.Flex-Wrap Klasa służy do owinięcia elementów wewnątrz pojemnika, a w tej klasie zarządzano przepełnienie elementów Flex. Domyślnie elementy są owinięte, ale nadal możesz użyć tej klasy, aby owinąć elementy, które
przepełnia kontener Flex.
Kod
Box1
Box2
Box3
Box4
.Flex-*-Wrap jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Flex-Nowrap
.Flex-Nowrap Klasa jest używana tam, gdzie nie chcesz, aby elementy Flex były owinięte, ponieważ domyślnie elementy Flex są owinięte wewnątrz kontenera Flex ze względu na jego responsywne zachowanie, dzięki czemu możesz użyć klasy Flex-Nowrap, aby rozpakować przedmioty.
Kod
Box1
Box2
Box3
Box4
.Flex-*-Nowraph jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Reverse-elest-wrap
.Reverse-elest-wrap Klasa jest używana nie tylko do owinięcia elastycznych elementów wewnątrz pojemnika, ale także odwrócenia ich zamówienia.
Kod
Box1
Box2
Box3
Box4
.Flex-*-odwrotność opakowań jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Flex-Fill
.Flex-Fill klasa jest używana tylko z .klasa col bez żadnego punktu przerwania lub szerokości. Klasa Flex-Fill zajmuje 100% szerokość pojemnika i zmusza inne elementy Flex, aby równo podzielić przestrzeń. Klasa Flex-Fill można zastosować na wielu elementach Flex i tylko na elementy Flex.
Kod
Box1
Box2
Box3
Box4
.Flex-*-Wypełnij jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Uzasadnić treść
Klasy justify-content są używane do uzasadnienia elastycznych elementów w kierunku rzędu lub innymi słowy wzdłuż osi głównej.
Justify-content-start
.justify-content-start klasa, przesuwa elementy Flex po lewej stronie pojemnika. Ta klasa jest używana tylko z .klasa D-Flex.
Kod
Box1
Box2
Box3
Box4
Box5
.justify-content-*-start jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Justify-Content-end
.Justify-Content-end klasa, przesuwa elementy Flex po prawej stronie pojemnika. Ta klasa jest używana tylko z .D-flex klasa.
Kod
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-End jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Justify-Content-Center
.Justify-Content-Center klasa, zbierz wszystkie elementy Flex na środku pojemnika. Ta klasa jest używana tylko z .D-flex klasa.
Kod
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-Center jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Justify-content-między
.justify-content-między Klasa służy do umieszczania przestrzeni między elementami flex. Ta klasa umieszcza pierwszy element Flex na początku pojemnika i ostatni element Flex na końcu pojemnika i dzieli całą przestrzeń między pozostałymi elementami Flex .Ta klasa jest używana tylko z .D-flex klasa.
Kod
Box1
Box2
Box3
Box4
Box5
.justify-content-*-pomiędzy jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Justify-Content-Around
.Justify-Content-Around Klasa służy do równego dzielenia przestrzeni między wszystkimi elementami flex. Ta klasa jest używana tylko z .D-flex klasa.
Kod
Box1
Box2
Box3
Box4
Box5
.justify-content-*- jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Wyrównać treść
Klasy wyrównania zawartości są używane do wyrównania zawartości w kierunku kolumny lub innymi słowy tylko wzdłuż osi krzyżowej. Aby wyrównać elementy elastyczne, użyj .klasa D-Flex z .Flex-Wrap klasa.
Wyrównanie-element-start
.Wyrównanie-element-start klasa, wyrównaj elementy elastyczne u góry pojemnika.
Kod
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.wyrównane i elementy-*-start jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Align-Iteme-end
.Align-Iteme-end klasa, wyrównaj elementy Flex na dole pojemnika.
Kod
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.wyrównane i elementy-*-koniec jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Center wyrównania
.Center wyrównania klasa, pionowo wyśrodkowała elementy Flex w pojemniku.
Kod
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.wyrównane i elementy-*-Center jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Align-Items-Baseline
.Align-Items-Baseline klasę, wyrównaj zawartość w polach zgodnie z osą główną, ze względu na to, które elementy kontenera wyrównują się automatycznie w kierunku pionowym.
Kod
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
.wyrównane i elementy-*-linia bazowa jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
STRITT-ITEMS-STRITTS
.STRITT-ITEMS-STRITTS klasa, poszerz elementy Flex w pionie zgodnie z wysokością pojemnika.
Kod
Box1
Box2
Box3
Box4
.wyrównane i elementy-*-rozciągnij jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Używanie punktów przerwania sprawia, że ta klasa reaguje również na inne ekrany.
Wyrównaj siebie
.wyrównać jaźń klasa jest taka jak .Wyrównanie klasa, ale różnica między obiema klasami jest .Wyrównane elementy są stosowane na pojemniku Flex i traktuje wszystkie elementy Flex z tą samą klasą, która jest w tym czasie używana przez EXT Container .wyrównać jaźń Klasa jest stosowana na pojedynczym flexie i leczy pojedynczy element Flex.
Poniżej są .Zajęcia wyrównania, które są używane na elementach Flex
- .wyrównanie samowystarczalności
- .wyrównanie samego siebie
- .wyrównany-środkowy
- .Align-Self-Baseline
- .wyrównany-self-stretch
.wyrównanie-self-*-start/end/center/bazowy/odcinek jest również używany z punktami przerwania po prostu wymień (*) Symbol z XXL, XL, LG, MD lub SM. Korzystanie z punktów przerwania sprawia, że te klasy reagują również na inne ekrany.
Wniosek
Klasy FlexBox są używane z klasą D-Flex w Bootstrap 5, aby uzasadnić, wyrównać i zarządzać treścią w rzędach lub w kolumnach. W powyższym artykule Zajęcia kontenerów Flex Conteners klasy Flex Directions, owijanie klas, elastyczne uzasadnienie klas w celu uzasadnienia elementów z rzędu, elastyczne klasy wyrównania w celu wyrównania zawartości w kolumnie i klas do wyrównania samych elementów są szczegółowo omówione.