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

justify-content: objaśnienie spacji pomiędzy (CSS)

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 generator z treścią justowania ustawioną na odstęp pomiędzy: pierwsze pole znajduje się równo z początkową krawędzią kontenera, ostatnie pole znajduje się równo z jego końcową krawędzią, a pozostała przestrzeń jest podzielona na równe odstępy pomiędzy polami pośrodku — nigdy przed pierwszym i po ostatnim.

To są szczegóły, które ludzie mylą. space-around daje każdemu pudełku równy margines po obu stronach, więc odstępy między pudełkami są dwukrotnie większe niż odstępy na dwóch zewnętrznych krawędziach (każda krawędź ma tylko jeden margines, a nie dwa). space-evenly idzie dalej i sprawia, że ​​każda szczelina ma ten sam rozmiar, łącznie z dwiema zewnętrznymi krawędziami — jedyną z trzech, w której odstępy wyglądają idealnie równomiernie na całej długości.

Przełącz listę rozwijaną justowania zawartości pomiędzy trzema wartościami poniżej i obserwuj zmianę układu tych samych trzech pól — to najszybszy sposób, aby zobaczyć różnicę, zamiast ją zapamiętywać. Skopiuj CSS dla tego, który odpowiada odstępom, które faktycznie chcesz.

🛡️
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.