⭐ 0
🔍
Tekst Obraz PDF i Dokumenty Audio Muzyka Elektronika Czas Użyteczne programy Walidatory Ezoteryka Gry

Pasek nawigacyjny CSS Flexbox — logo po lewej stronie, linki po prawej

Zbuduj wizualnie układ flexbox CSS: kierunek elastyczny, justowanie zawartości, wyrównanie elementów, elastyczne zawijanie i przerwa w kontenerze, a także elastyczny wzrost dla każdego dziecka, elastyczne kurczenie i elastyczna podstawa, wszystko z podglądem na żywo i kopiowalnym CSS.

Przetwarzanie... 0%

Wynik

Ta strona otwiera wstępnie ustawiony generator Flexbox w klasycznym układzie paska nawigacyjnego: justify-content ustawiony na odstęp między i wyrównane elementy ustawione na środek. Umieść logo w pierwszym polu, a rząd linków nawigacyjnych w ostatnim (lub podziel linki na środkowe pola), a kontener Flexbox przesunie je na przeciwne końce paska, utrzymując każdy element w tym samym pionowym środku, niezależnie od tego, jak wysokie jest logo lub tekst łącza.

Dzięki odstępowi między nimi to działa: przypina pierwsze dziecko do krawędzi początkowej, a ostatnie dziecko do krawędzi końcowej, a następnie równomiernie rozdziela między nimi pozostałe elementy podrzędne — dokładnie w kształcie lewego logo i prawego łącza, którego używa prawie każdy nagłówek witryny. Align-items: center rozwiązuje następnie wyrównanie w pionie, które wymagało hackowania wysokości linii lub sztuczek z wyświetlaniem komórek tabeli.

Dostosuj liczbę elementów podrzędnych, aby dopasować ją do prawdziwego paska nawigacyjnego — dwa pola na samo logo i pasek wezwania do działania, więcej na logo i kilka linków — i obserwuj, jak układ dostosowuje się na żywo. Skopiuj blok CSS po dopasowaniu go do nagłówka lub otwórz ustawienie wstępne spacji między, jeśli chcesz zobaczyć tę jedną właściwość w porównaniu z jej bliskimi krewnymi.

🛡️
Wykonywane w przeglądarce

Twoje pliki i dane nigdy nie opuszczają tego urządzenia. Przetwarzanie odbywa się całkowicie offline. W 100% bezpieczne.

Zasady i formaty

  • Elementy sterujące kontenera: kierunek zginania, justowanie zawartości, wyrównywanie elementów, zawijanie elastyczne i wprowadzanie odstępu w pikselach, stosowane na żywo do podglądu.
  • Domyślnie trzy pola podrzędne oznaczone kolorami (dodaj do ośmiu, usuń do dwóch), każde z własnymi polami flex-grow, flex-shrink i flex-base.
  • Kopiowalny blok CSS z regułą .flex-container plus jedna reguła .flex-item-N na każde dziecko, która ma inne niż domyślne właściwości flex.

Kluczowe korzyści

✓ Każda kontrola kontenera oraz funkcje flex-grow, flex-shrink i flex-base każdego dziecka aktualizują na żywo trzy ponumerowane pola podglądu, dzięki czemu możesz dokładnie zobaczyć, co robią reguły flexbox, zanim dotkniesz arkusza stylów.
✓ Generator drukuje tylko reguły podrzędne, które faktycznie różnią się od domyślnych ustawień CSS, więc skopiowany kod pozostaje krótki i czytelny, zamiast powtarzać flex-grow: 0 w każdym polu.
✓ Gotowe strony obsługują układy wyszukiwane przez użytkowników według nazwy: wyśrodkowanie elementu div, logo-lewy link-prawy pasek nawigacyjny i elastyczne kolumny o równej szerokości — otwórz jedną, a narzędzie jest już skonfigurowane.

Przypadki użycia

  • • Uzyskaj dokładny CSS, aby wyśrodkować element div zarówno w poziomie, jak i w pionie, obserwując działanie elementów justify-content i wyrównania w polach podglądu na żywo.
  • • Zbuduj układ paska nawigacyjnego z logo po lewej stronie i linkami po prawej stronie ze spacjami między elementami i wyrównaniem: wyśrodkuj, a następnie skopiuj CSS kontenera bezpośrednio do komponentu nagłówka.
  • • Porównaj przestrzeń pomiędzy, przestrzeń wokół i przestrzeń równomiernie obok siebie na tych samych trzech polach, zamiast zgadywać, który z nich odpowiada żądanemu odstępowi.