CSS Flex Box Layout

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacja, szukaj

CSS Flex Box Layout (wł. Flexible Box[1]) – moduł zapewniający efektywniejszy i skuteczniejszy sposób na zarządzanie wyrównaniem, rozkładem elementów wewnątrz kontenerów oraz samymi kontenerami[2].

Opis[edytuj]

Głównym założeniem CSS Flex Box Layout jest nadanie elementom możliwości zmiany szerokości, wysokości oraz rozmieszczenia w różnych konfiguracjach[2].

Główne pojęcia[edytuj]

Odnoszące się do kontenera:

  • display: flex;
  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow: <‘flex-direction’> || <‘flex-wrap’>
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Odnoszące się do elementów:

  • order: <integer>;
  • flex-grow: <number>;
  • flex-shrink: <number>;
  • flex-basis: <length> | auto;
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;[3]

Przypisy

  1. CSS Flexible Box Layout Module Level 1, www.w3.org [dostęp 2016-05-15].
  2. a b Flexbox Layout - część 1 - parent container, Dawid Ryłko, 14 maja 2016 [dostęp 2016-05-15] (pol.).
  3. Łukasz Bącik, Flexbox, czyli elastyczne tworzenie stron www | Łukasz Bącik - Blog, Flexbox, czyli elastyczne tworzenie stron www | LukaszBacik.pl [dostęp 2017-04-13] (pol.).