CSS Flex Order

Flexbox lub element służy do zawierania zawartości HTML. Właściwość CSS Flex służy do zastosowania wpływu elastycznych długości na elastyczne elementy. Arkusz stylów kaskadowych oferuje nieruchomość zamówienia używanego do układania elastycznych elementów. Aby zastosować właściwość zamówienia, elementy wewnątrz Flexbox powinny być elastyczne. W przeciwnym razie nie będzie miało wpływu na nieruchomość.

FLEX CREATION I ZAMÓWIENIA

W tym przykładzie użyliśmy prostego DIV do dodania w nim kolejnych div, tworząc zjawisko gniazdujące. Zewnętrzna div jest znana jako flexbox do kilku zawartości w nim. Ich zewnętrzna div jest główną divą, która przenosi w niej kilka divów. Jest zadeklarowany z klasą CSS, aby zastosować na nim niektóre efekty CSS. Ta klasa jest opisana w sekcji głównej z tagiem stylu, tworząc wewnętrzny CSS.

Wewnątrz div deklarowane są cztery kolejne Divy. Każda div odnosiła się do pojedynczego flexu. Dodamy tutaj styl inline, aby dodać kolor do każdego flexa. Każda Div jest również rozrywana z IDS CSS. Te wszystkie identyfikatory są odpowiedzialne za zastosowanie wszystkich efektów na Flex, które są ułożone w odpowiedniej kolejności.

ID i klasa CSS

W tym momencie konieczne jest opracowanie tych dwóch terminologii CSS. Gdy omawiamy, że dotyczy to właściwości CSS, te identyfikatory i klasy odgrywają istotną rolę w stosowaniu jakiegokolwiek wpływu na zawartość HTML. Ilekroć mówimy o wewnętrznym i zewnętrznym CSS, spotykamy identyfikatory i klasy. Te identyfikatory i klasy mają kolor, styl tekstowy, wymiary i wiele innych efektów na zawartość zadeklarowane w sekcji ciała. Aby uzyskać dostęp do tych efektów z klas i identyfikatorów, musimy wspomnieć o tym, że są wymienione w znaczniku treści, podobnie jak identyfikator „One”. A wszystkie identyfikatory od pierwszego do czwartego są również zadeklarowane.

Wracając do kodu HTML, tutaj z każdym wewnętrznym Div lub Flex, użyliśmy również tekstu, który wyświetli zamówienie wyraźniej. Dzieje się tak, gdy zdanie powstaje poprzez zorganizowanie Flex w odpowiedniej kolejności. Kierunek zamówienia Flex to wybór użytkownika. Możemy liczyć losowo Flex. Te flexboxy powstają, gdy stosuje się do nich styl CSS. Teraz rozważmy kod CSS.

Najpierw ogłosimy identyfikator należący do zewnętrznej div wewnątrz znacznika stylu. Niniejszy div określi obszar, w którym powstają wszystkie wewnętrzne divy. Do tego identyfikatora dodamy szerokość, wysokość i właściwości graniczne. Ważną cechą, która służy do utworzenia Flexa, jest efekt „wyświetlania”. Ponieważ ta właściwość jest usuwana, na stronie internetowej zostaną utworzone proste prostokąt. Te zgięcia zostaną utworzone za pomocą tej właściwości wyświetlacza:

#jeden
Wyświetlacz: Flex;

Flex jest zwykle tworzony w kierunku poziomym od lewej do prawej. W porządku, to było dla zewnętrznego div. Aby dodać wymiary do wszystkich wewnętrznych div lub flex, użyjemy identyfikatora „One” z Div. Właściwości te obejmują szerokość i wysokość jednego bloku lub flex. Wysokość pojedynczego wewnętrznego div jest równa wysokości zewnętrznej div. Podczas gdy szerokość zewnętrznej div jest podzielona na wszystkie cztery wewnętrzne divy. Odbywa się to poprzez deklarowanie opisu identyfikatora ponownie ocenianego przez każdy flex wewnątrz znacznika z różnymi nazwami identyfikatorów dla każdego flexa. Każda nazwa DIV jest podana zgodnie z zamówieniem. Na przykład pierwszy Div zawiera zamówienie jako 1. Nie ma znaczenia, w jakiej kolejności deklarujesz kod w CSS lub HTML, ale numer zamówienia decyduje o zamówieniu każdego fleda.

Div#najpierw
Zamówienie: 1

Zamknij wszystkie tagi. Teraz zapisz kod z rozszerzeniem HTML, aby otworzyć go jako tekst i stronę internetową.

Podczas wykonania, wewnątrz przeglądarki, zobaczysz, że kolejność, w której zdefiniowałeś każdą wewnętrzną div lub flex, jest wyświetlana z blokami odpowiednich kolorów. Ponadto tekst dodany do każdego wewnętrznego znacznika DIV przedstawia, że ​​zdanie powstaje poprzez zorganizowanie Flex w kolejności. To pokazuje, że zamówienie, które wspomnialiśmy, jest dokładnie przestrzegane.

Odwrotna kolejność flexu

Dzięki flexbox i elastycznemu tworzeniu widoczne jest, że nie trzeba wspominać o żadnym przepływu elastycznym w kodzie. Domyślnie przepływ elastyczny jest w kierunku poziomym, a kolejność jest obserwowana w taki sam sposób, jak jest to opisane, czyli domyślnie kolejność rosnąca. Ale po ogłoszeniu kolejności Flex w tworzeniu Flex możesz go odwrócić, wspominając o kierunku Flex.

#jeden
Kierunek flex: rewalekcja wiersza;

Ta właściwość jest dodawana do flexbox lub zewnętrznej div, ponieważ jest odpowiedzialna za zawieranie wewnętrznych zgięć w niej. A jeśli chcesz użyć zamówienia domyślnego, całkowicie usuń tę właściwość kierunku lub dodaj kierunek Flex jako „wiersz”. To ponownie stworzy zamówienie rosnące.

Podczas wykonania zobaczysz, że cała kolejność Flex jest odwrócona, możesz wyraźnie zobaczyć kolory Flex, a tekst zdania jest odpowiednio odwrócony.

Pionowy flex

Jak wcześniej opisaliśmy, kierunek Flex nie jest opisany. Domyślnie znajduje się w kierunku poziomym z pojedynczą kolumną i wieloma wierszami. Ale aby zrobić pionowy flex, kierunek flexbox jest zmieniany z wiersza na kolumny.

#jeden
Kierowanie Flex: kolumna;

Korzystając z tej funkcji, powstanie pionowy flexbox, mając całą nienaruszoną DIV Flex, a kolejność całego flex będzie taka sama.

Zorganizuj FlexBox

FlexBox można zmienić kolejność, określając dowolne flex wewnątrz pudełka, aby znaleźć się w pierwszej pozycji. Wybraliśmy trzecią, która otrzymała zamówienie -1, kolor tekstu jest zmieniany z czerwonego na czerwony, a rozmiar jest również zwiększony w celu odróżnienia go od innych.

Ten trzeci flex zostanie usunięty z listy zamówień. W ten sposób zamówienie nie zostanie utrzymane. Pudełko, które dojdzie do pierwszej pozycji, zakłóci kolejność całego div.

Podczas egzekucji zobaczysz, że pierwszy blok jest przeniesiony w prawo, aby utworzyć miejsce dla 3^{r & D} blok. W ten sposób możemy ponownie zamówić FlexBox, określając dowolną elastyczność.

Wniosek

W tym artykule próbowaliśmy opisać właściwość CSS Flex Order, tworząc w nim FlexBox i Flex Treść. Zakaz elastycznej jest stosowany przez dodanie kolorów i tekstu do flex, pokazując, że wspomniana kolejność jest utrzymywana. Ponadto możemy odwrócić kolejność, wspominając o przepływie kierunku Flex w kolejności odwróconej. Kierunek poziomy jest domyślnym kierunkiem Flex; Można go również zmienić w kierunku pionowym, zmieniając kierunek wiersza w kolumnie. Wszystkie te efekty są wyjaśnione przy użyciu określonych kodów w celu wyjaśnienia koncepcji elastycznej kolejności.

.