Przejdź do treści

Układ elastyczny

Kontener elastyczny

(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome)

  1. Układ elastyczny w bloku:
    selektor { display: flex }
  2. Układ elastyczny w linii:
    selektor { display: inline-flex }
Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny.

Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci układane są elastycznie. Sam kontener nie jest układany elastycznie na stronie, a jedynie jego dzieci. Wstawienie takiego kontenera przełącza tryb wyświetlania elementów w nim zawartych na układ elastyczny.

Aby jakiekolwiek własności, opisane dalej w tym rozdziale, dały widoczny efekt, konieczne jest dodanie powyższego stylu do elementu, który ma wyznaczać układ elastyczny.

Komentarze

Zobacz więcej komentarzy