Przejdź do treści

CSS / Układ elastyczny

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak przełączyć sposób rozpalnowania elementów na układ elastyczny?

selektor { display: flex }
selektor { display: inline-flex }

Zobacz więcej...

W jaki sposób ustawić elastycznie elementy w wierszach lub kolumnach w różnych kierunkach?

selektor { flex-direction: kierunek }
selektor { flex-wrap: zawijanie }
selektor { flex-flow: wartości atrybutów }

Zobacz więcej...

Jak zmienić kolejność wyświetlania elementów na stronie?

selektor { order: kolejność }

Zobacz więcej...

Jak sprawić, aby rozmiary elementów elastycznie dopasowały się do ich zawartości w wolnej przestrzeni na stronie?

selektor { flex-grow: rozciągnięcie }
selektor { flex-shrink: ściśnięcie }
selektor { flex-basis: baza }
selektor { flex: wartości atrybutów }

Zobacz więcej...

Jak elastycznie dopasować margines elementu, tak aby wypełnił wolną przestrzeń?

selektor { margin-top: auto }
selektor { margin-right: auto }
selektor { margin-bottom: auto }
selektor { margin-left: auto }
selektor { margin: auto }

Zobacz więcej...

Jak równomiernie wyrównać elementy na stronie?

selektor { justify-content: justowanie }

Zobacz więcej...

Co zrobić, aby wyśrodkować blok w pionie?

selektor { align-items: wyrównanie }
selektor { align-self: wyrównanie }

Zobacz więcej...

Jak ustawić bloki w wierszach na dole, na górze albo równomiernie na całej dostępnej wysokości?

selektor { align-content: wyrównanie }

Zobacz więcej...

Komentarze

Zobacz więcej komentarzy

Facebook