Plac zabaw CSS Flexbox i Grid

Czym jest Plac zabaw CSS Flexbox i Grid?

Plac zabaw CSS Flexbox i Grid to darmowy wizualny piaskownica do nauki i prototypowania dwóch głównych modeli układu CSS, stworzona dla deweloperów front-end, uczniów i projektantów. Wybierz Flex lub Grid przełącznikiem trybu, a następnie ustaw właściwości kontenera za pomocą prostych list rozwijanych i pól liczbowych: w trybie Flex kontrolujesz flex-direction, flex-wrap, justify-content i align-items; w trybie Grid określasz, ile kolumn i wierszy (renderowanych jako repeat(n, 1fr)) oraz justify-items i align-items. Wartość gap i liczba elementów dotyczą obu. Podgląd na żywo ponumerowanych kafelków pokazuje dokładnie, jak zachowują się Twoje wyrównanie i odstępy, a pełna reguła .container CSS jest generowana do skopiowania. Sięgnij po niego, gdy chcesz zobaczyć, jak naprawdę wygląda ustawienie flex lub grid, zanim wkleisz je do swojego projektu.

Jak używać Plac zabaw CSS Flexbox i Grid

1. Wybierz Flex lub Grid przełącznikiem trybu, aby zdecydować, który model układu budujesz.
2. W trybie Flex ustaw flex-direction, flex-wrap, justify-content i align-items z list rozwijanych.
3. W trybie Grid ustaw liczbę kolumn i wierszy oraz justify-items i align-items.
4. Otwórz Ustawienia, aby zmienić gap (odstęp w px) i liczbę elementów pokazywanych w podglądzie.
5. Obserwuj, jak podgląd kafelków przestawia się, gdy zmieniasz każdą właściwość.
6. Skopiuj wygenerowaną regułę .container CSS i wklej ją do swojego arkusza stylów.

Przykłady

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Najczęściej zadawane pytania

Jaka jest tutaj różnica między Flexbox a Grid?

Tryb Flex rozkłada elementy wzdłuż jednej osi i udostępnia flex-direction, flex-wrap, justify-content i align-items. Tryb Grid układa elementy w dwuwymiarowej siatce za pomocą grid-template-columns i grid-template-rows (zapisanych jako repeat(n, 1fr)) wraz z justify-items i align-items. Przełącz tryb przełącznikiem, aby porównać, jak każdy model radzi sobie z tym samym wyrównaniem.

Co robi wartość gap?

Gap ustawia, w pikselach, odstęp między każdym elementem zarówno w układach Flex, jak i Grid za pomocą właściwości CSS gap. Zwiększ go, aby rozsunąć kafelki, lub ustaw na 0, aby uzyskać przylegający układ; podgląd i wygenerowany CSS aktualizują się natychmiast.

Dlaczego justify-content i align-items są w Grid zapisywane inaczej?

Grid używa słów kluczowych start, end, center i stretch dla justify-items i align-items, podczas gdy Flex używa flex-start i flex-end. Narzędzie generuje poprawne słowa kluczowe dla trybu, w którym się znajdujesz, więc skopiowany CSS jest zawsze prawidłowy.

Czy mogę zmienić, ile elementów jest pokazywanych?

Tak. Otwórz Ustawienia i zmień liczbę elementów, aby dodać lub usunąć ponumerowane kafelki podglądu (do 24). Wpływa to tylko na pokaz na ekranie; wygenerowany CSS opisuje kontener, a nie same elementy.

Czy moje dane są gdzieś przesyłane?

Nie. Plac zabaw działa w całości w Twojej przeglądarce za pomocą JavaScript, więc Twoje ustawienia i wygenerowany CSS nigdy nie są wysyłane na serwer. Działa prywatnie, a nawet offline po wczytaniu strony.