Efektywne zmiany kolejności w Flexboxie za pomocą CSS

W dzisiejszym przewodniku zajmiemy się interesującym ćwiczeniem na temat "Order" w Flexbox. Nauczysz się, jak możesz zmieniać kolejność elementów w kontenerze Flex na dwa różne sposoby. Skorzystamy z klas CSS oraz właściwości flex-direction Flexbox. Po ukończeniu tego przewodnika będziesz mógł nie tylko zrozumieć kolejność elementów, ale także skutecznie ją zastosować. Zaczynajmy!

Najważniejsze wnioski

• Możesz zmieniać kolejność elementów Flex za pomocą właściwości order.
• Alternatywną metodą układania elementów jest właściwość flex-direction, która pozwala określić kolejność.

Krok po kroku

Aby zmienić kolejność zawartości w kontenerze Flex, najpierw stworzymy prosty układ. Możesz wziąć do tego dokument HTML zawierający pięć elementów div, które chcemy przestawić. Liczby w elementach div reprezentują obecną kolejność od 5 do 1.

W pierwszym kroku otwórz swój plik HTML i dodaj strukturę. Elementy div powinny być oznaczone klasami L1, L2, L3, L4, i L5.

Po ustaleniu podstawowej struktury chcemy upewnić się, że początkowa kolejność elementów od lewej do prawej od 5 do 1. Naszym celem jest wyświetlenie elementów w kolejności rosnącej od 1 do 5.

Aby to osiągnąć, użyj właściwości order w swoim CSS dla każdego elementu. Zacznij od ustawienia wartości order tak, aby L1 miało order 5, L2 miał 4, i tak dalej, aż do L5, które ma order 1.

Po zapisaniu zmian w przeglądarce i ponownym załadowaniu strony, powinieneś teraz zobaczyć elementy w prawidłowej kolejności od 1 do 5.

Jeśli chodzi o dwie możliwości rozwiązania tego zadania, jak już wspomniano, pierwsza możliwość polega na użyciu opisanej wyżej właściwości order. Druga metoda, którą teraz omówimy, wykorzystuje właściwość flex-direction.

Aby zbadać inne możliwości, na początku zakomentuj właściwości order w swoim pliku CSS, dzięki czemu będziemy mogli wypróbować nową metodę, nie tracąc poprzedniej.

Teraz możesz użyć właściwości flex-direction dla kontenera. Domyślnie jest ustawiona na row. Zmieniamy to na row-reverse, co powinno spowodować odwrócenie kolejności elementów.

Po zmianie flex-direction na row-reverse, ponownie zapisz plik i załaduj podgląd w przeglądarce. Teraz powinieneś zobaczyć elementy w prawidłowej kolejności od 1 do 5, nie używając właściwości order.

Innym przykładem, który możesz wypróbować, jest użycie column-reverse do wertykalnego układu elementów. Spowoduje to sortowanie układu od dołu do góry.

Teraz powinieneś jasno zrozumieć obie metody zmiany kolejności elementów Flex: za pomocą właściwości order i właściwości flex-direction. Obydwie metody oferują różne podejścia do dostosowania prezentacji twojej treści.

Podsumowanie

W tej instrukcji nauczyłeś się, jak manipulować kolejnością elementów w kontenerze Flex. Teraz znasz użycie właściwości order i jak dostosować właściwość flex-direction, aby zmieniać prezentację twoich elementów zarówno poziomo, jak i pionowo. Eksperymentuj z tymi podejściami, aby lepiej zrozumieć układy Flexbox.