Flexbox w CSS i HTML: Instrukcje dotyczące wyśrodkowania na osi głównej

W tej instrukcji dowiesz się, jak za pomocą Flexboxa możesz wyrównać elementy w kontenerze Flex wzdłuż osi głównej. Omówiliśmy już wyrównanie wzdłuż osi poprzecznej, ale oś główna jest tak samo ważna. Technologia Flexbox oferuje różne metody, aby elastycznie dostosować wyrównanie Twoich elementów. Spójrzmy z bliska!

Najważniejsze informacje

• Wyrównanie w osi głównej odbywa się za pomocą właściwości justify-content.
• Możesz użyć różnych wartości, takich jak center, flex-start, flex-end, space-between i space-around, aby dostosować swoje układ.
• Ustawienia Flexbox bezpośrednio wpływają na rozmieszczenie elementów w żądanym kierunku.

Krok po kroku

1. Inicjowanie kontenera Flex

Rozpocznij od utworzenia kontenera Flex i ustawienia jego kierunku Flex. W tym przykładzie ustawiamy kierunek Flex na wiersz. Oznacza to, że elementy zostaną rozmieszczone w rzędzie od lewej do prawej.

2. Standardowe wyrównanie elementów

Jeśli umieścisz swoje elementy w kontenerze bez specjalnych dostosowań stylizacyjnych, zobaczysz, że domyślnie są one wyrównane na początku kontenera. Możesz nadać im szerokość 100 pikseli, aby to zilustrować.

3. Wyrównanie do środka

Aby wyśrodkować elementy, użyj właściwości CSS justify-content z wartością center. Spowoduje to wyrównanie Twoich elementów na środku kontenera, tworząc bardzo atrakcyjne rozmieszczenie.

4. Wyrównanie elementów do końca

Jeśli chcesz, aby Twoje elementy były wyrównane na końcu kontenera, możesz użyć wartości flex-end dla justify-content. Spowoduje to przesunięcie elementów na prawy koniec Twojego kontenera.

5. Wyrównanie elementów na początku

Domyślnym zachowaniem bez dostosowań jest flex-start, co oznacza, że elementy pozostaną na początku kontenera. To ustawienie jest przydatne, jeśli chcesz przejrzyste, uporządkowane rozmieszczenie elementów w górnej części kontenera.

6. Zmiana kierunku Flex

Jeśli zmienisz kierunek Flex na kolumnę, oś główna zmieni się z poziomej na pionową. Spowoduje to rozmieszczenie elementów teraz od góry do dołu.

7. Wyśrodkowanie elementów w pionowym ustawieniu

Możesz również wyśrodkować elementy w tym nowym ustawieniu, korzystając z justify-content: center. Ta konfiguracja sprawia, że wszystkie elementy są wyświetlane na środku kontenera.

8. Wyrównanie na dolnym końcu

Jeśli chcesz, aby elementy znajdowały się w dolnej części kontenera, możesz ponownie ustawić flex-end. Spowoduje to umieszczenie elementów na dolnym brzegu kontenera.

9. Zastosowanie właściwości przestrzeni

Flexbox pozwala również zarządzać przestrzenią między Twoimi elementami za pomocą space-between, space-around i space-evenly. Te właściwości rozdzielają dostępną przestrzeń w różny sposób.

10. Wykorzystanie przestrzeni między

Z ustawieniem justify-content: space-between zachowanie jest takie, że pierwszy element pozostaje na górnym krańcu, a ostatni element na dolnym krańcu kontenera, przy równomiernym rozmieszczeniu miejsca między elementami.

11. Wypróbuj Space-Around

Gdy używasz space-around, wokół każdego elementu tworzona jest taka sama ilość miejsca. Ten odstęp staje się widoczny w środku kontenera, podczas gdy elementy pozostają równomiernie rozłożone.

12. Użyj Space-Evenly

Poprzez użycie space-evenly zapewniasz, że pomiędzy elementami a krawędzią kontenera znajduje się równomierny odstęp.

Podsumowanie

W tym samouczku nauczyłeś się, jak ustawić wyśrodkowanie w głównej osi za pomocą Flexboxa. Poprzez użycie justify-content możesz bardzo elastycznie dostosować pozycjonowanie swoich elementów. Poznałeś również różne właściwości, które pomogą Ci uzyskać pożądany układ. Wykorzystaj tą wiedzę, aby tworzyć atrakcyjne i przyjazne dla użytkownika projekty!