Flexbox - ściągawka

terminologia selektory standardowe selektory niestandardowe szersze opisy i przykłady

terminologia

osie:



zasobnik i elementy:



selektory standardowe

właściwość opis wartość domyślna wartości
div
box-sizing: Deklaruje sposób obliczania wyświetlanych rozmiarów elementu. content-box content-box - width|height = content
border-box - width|height = content + padding + border.
zasobnik
display: flex; Deklaruje zawartość kontenera jako elastyczną. inline
flex-flow Zbiorcza właściwość dla:
flex-direction + flex-wrap.		 row nowrap  
• flex-direction Definiuje kierunek osi kierunek głównej osi (main-axis) porządkowania zawartości zasobnika. row row
1
2
3
 row-reverse
1
2
3
 column
1
2
3
 column-reverse
1
2
3
• flex-wrap Definiuje ułożenie wierszy wewnątrz zasobnika względem zadeklarowanej osi poprzecznej. nowrap nowrap
1
2
3
4
5
1
2
3
4
5
 wrap
1
2
3
4
5
1
2
3
4
5
 wrap-reverse
1
2
3
4
5
1
2
3
4
5
justify-content Definiuje sposób wyrównania zawartości zasobnika względem osi głównej. flex-start flex-start
1
2
3
1
2
3
4
5
6
1
2
3
 flex-end
1
2
3
1
2
3
4
5
6
1
2
3
 center
1
2
3
1
2
3
4
5
6
1
2
3
 space-between
1
2
3
1
2
3
4
5
6
1
2
3
 space-around
1
2
3
1
2
3
4
5
6
1
2
3
align-items Definiuje wyrównanie elementów względem osi poprzecznej (cross axis).

Dla wielu wierszy nie działa: baseline, stretch (trzeba używać: align-content). 		stretch flex-start
1
2
3
1
2
3
4
5
1
2
3
 flex-end
1
2
3
1
2
3
4
5
1
2
3
 center
1
2
3
1
2
3
4
5
1
2
3
 baseline
1
2
3
1
2
3
4
5
1
2
3
 stretch
1
2
3
1
2
3
4
5
1
2
3
align-content Definiuje wyrównanie wierszy zawartości kontenera względem osi poprzecznej.

Dla pojedynczego wiersza nie działa (trzeba używać align:items); 		stretch flex-start
1
2
3
4
5
1
2
3
4
5
 flex-end
1
2
3
4
5
1
2
3
4
5
 center
1
2
3
4
5
1
2
3
4
5
 space-between
1
2
3
4
5
1
2
3
4
5
 space-around
1
2
3
4
5
1
2
3
4
5
 stretch
1
2
3
4
5
1
2
3
4
5
element
order Zmienia domyślną kolejność elementów. 0 -1
1
2
3
1
2
3
 1
1
2
3
1
2
3
align-self Definiuje wyrównanie elementu względem osi poprzecznej (cross axis). auto flex-start
1
2
3
1
2
3
 flex-end
1
2
3
1
2
3
 center
1
2
3
1
2
3
 baseline
1
2
3
1
2
3
 stretch
1
2
3
1
2
3
 auto
1
2
3
1
2
3
flex Zalecana, zbiorcza właściwość dla:
flex-grow + [flex-shrink + flex-basis]. 		0 1 auto  
• flex-grow Definiuje, czy rozciągać elementy powyżej orginalnego rozmiaru i w jakich proporcjach dzielić pomiędzy nie wolną przestrzeń. 0 0
1
2
3
1
2
3
 1
1
2
3
1
2
3
 1 + 1
1
2
3
1
2
3
 1 + 2
1
2
3
1
2
3
 (1)
1
2
3
1
2
3
4
5
6
1
2
3
• flex-shrink Definiuje, czy ściskać elementy poniżej ich orginalnego rozmiaru i jaką część elementu ścisnąć proporcjonalnie do stopnia ściśnięcia innych elementów. 1 0 (po 30px)
1
2
3
 1 (po 30px)
1
2
3
 2 (po 30px)
1
2
3
• flex-basis Definiuje domyślny rozmiar elementu przed/bez dzielenia przestrzeni. auto 20px
1
2
1
2
 50%
1
2
1
2
 auto
1
2
1
2

selektory niestandardowe, wartości niestandardowe

Uwaga: Odwrotnie niż na poniższych zestawieniach, w arkuszach CSS najlepiej jest umieszczać selektor standardowy i wartość standardową jako ostatnią na liście, po selektorach i wartościach niestandardowych. Zwłaszcza w przypadku display.

właściwość wartości wartość domyślna
zasobnika
display: flex | inline-flex;
-ms-flex; /* IE 10 */
-webkit-box-flex; /* iOS 6-, Safari 3.1-6 */
-webkit-flex; /* Chrome, Safari 6.1+ */
 inline
flex-flow:
-ms-flex-flow: /* IE 10 */
-webkit-flex-flow: /* Chrome, Safari 6.1+ */
 flex-direction flex-wrap; row nowrap
• flex-direction:
-ms-flex-direction: /* IE 10 */
-webkit-flex-direction: /* Chrome, Safari 6.1+ */
 row | row-reverse | column | column-reverse; row
• flex-wrap:
-ms-flex-wrap: /* IE 10 */
-webkit-flex-wrap: /* Chrome, Safari 6.1+ */
 nowrap | wrap | wrap-reverse nowrap
justify-content:
-ms-flex-pack: /* IE 10 */
-webkit-justify-content: /* Chrome, Safari 6.1+ */
 flex-start | flex-end | center | space-between | space-around;

start | end | center | justify | distribute; /* IE 10 */
 flex-start
align-items:
-ms-flex-align: /* IE 10 */
-webkit-align-items: /* Chrome, Safari 7.0+ */
 flex-start | flex-end | center | baseline | stretch;

start | end | center | baseline | stretch; /* IE 10 */ 		stretch
align-content:
-ms-flex-line-pack: /* IE 10 */
-webkit-align-content: /* Chrome, Safari 7.0+ */
 flex-start | flex-end | center | space-between | space-around | stretch;

start | end | center | justify | distribute | stretch; /* IE 10 */ 		stretch
elementów
order:
-ms-flex-order: /* IE 10 */
-webkit-box-ordinal-group: /* iOS 6-, Safari 3.1-6 */
-webkit-order: /* Chrome, Safari 6.1+ */
 kolejność;

[-n, 0, +n] 		0
align-self:
-ms-flex-item-align: /* IE 10 */
-webkit-align-self: /* Safari 7.0+ */
 flex-start | flex-end | center | baseline | stretch | auto;

start | end | center | baseline | stretch | auto; /* IE 10 */
auto
flex:
-ms-flex: /* IE 10 */
-webkit-box-flex: /* iOS 6-, Safari 3.1-6 */
-webkit-flex: /* Safari 6.1+ */
 Grow [Shrink Basis];

[0 +g] [0 +s] [100px | 20% | 5rem | calc(20% -10 )] 		0 1 auto
• flex-grow:
-ms-flex /* tylko zbiorczo - IE10 */
-webkit-flex-grow: N; /* Chrome, Safari 6.1+ */
 N; 0
• flex-shrink:
-ms-flex /* tylko zbiorczo - IE10 */
-webkit-flex-shrink: /* Chrome, Safari 6.1+ */ 		N; 1
• flex-basis:
-ms-flex /* tylko zbiorczo - IE10 */
-webkit-flex-basis: /* Chrome, Safari 6.1+ */
 długość | auto; auto

szersze opisy i przykłady

Uwaga: Odwrotnie niż na poniższych zestawieniach, w arkuszach CSS najlepiej jest umieszczać selektor standardowy i wartość standardową jako ostatnią na liście, po selektorach i wartościach niestandardowych. Zwłaszcza w przypadku display.

właściwości zasobnika

display

Deklaruje zawartość kontenera jako elastyczną. 
  display: flex;                  /* lub: inline-flex */
  
  display: -ms-flex;              /* IE 10 */
  display: -webkit-box-flex;      /* iOS 6-, Safari 3.1-6 */
  display: -webkit-flex;          /* Chrome, Safari 6.1+ */

flex-flow (zbiorcza wartość: flex-direction, flex-wrap)

Zbiorcza właściwość dla:
- flex-direction
- flex-wrap
  flex-flow:          kierunek-osi  zawijanie-osi;  (row nowrap - domyślnie)
  
  -ms-flex-flow:      kierunek-osi  zawijanie-osi;  /* IE 10 */
  -webkit-flex-flow:  kierunek-osi  zawijanie-osi;  /* Chrome, Safari 6.1+ */
  
  modyfikowany przez: 
  - direction:rtl;
  - writing-mode: vertical-rl;
  - writing-mode: horizontal-tb;

• flex-direction

Definiuje kierunek osi kierunek głównej osi (main-axis) porządkowania zawartości zasobnika. 
  flex-direction:          row | row-reverse | column | column-reverse;  (row - domyślnie)
  
  -ms-flex-direction:      row | row-reverse | column | column-reverse;  /* IE 10 */
  -webkit-flex-direction:  row | row-reverse | column | column-reverse;  /* Chrome, Safari 6.1+ */
  
  row:            = od lewej do prawej 
  row-reverse     = od prawej do lewej
  column          = z góry na dół
  column-reverse  = z dołu do góry

• flex-wrap

Definiuje ułożenie wierszy wewnątrz zasobnika względem zadeklarowanej osi poprzecznej. 
  flex-wrap:          nowrap | wrap | wrap-reverse;  (nowrap - domyślnie)
  
  -ms-flex-wrap:      nowrap | wrap | wrap-reverse;  /* IE 10 */
  -webkit-flex-wrap:  nowrap | wrap | wrap-reverse;  /* Chrome, Safari 6.1+ */
  
  nowrap        = jedna linia
  wrap          = wiele linii, wiersze od góry do dołu
  wrap-reverse  = wiele linii, wierdze od dołu do góry

justify-content

Definiuje sposób wyrównania zawartości zasobnika względem osi głównej. 
  justify-content:          flex-start | flex-end | center | space-between | space-around;  (flex-start - domyślnie)
  
  -ms-flex-pack:            start | end | center | justify | distribute;                     /* IE 10 */
  -webkit-justify-content:  flex-start | flex-end | center | space-between | space-around;   /* Chrome, Safari 6.1+ */
  
  flex-start     = wyrównaj do początku osi głównej
  flex-end       = wyrównaj do końca osi głównej
  center         = wycentruj do środka osi głównej
  space-between  = wyjustuj - wyrównaj do obu krawędzi osi głównej
  space-around   = podziel równo przestrzeń pomiędzy elementami

align-items

Definiuje wyrównanie elementów względem osi poprzecznej (cross axis); 
  align-items:          flex-start | flex-end | center | baseline | stretch;      (stretch - domyślnie)

  -ms-flex-align:       start | end | center | baseline | stretch;                /* IE 10 */
  -webkit-align-items:  flex-start | flex-end | center | baseline | stretch;      /* Chrome, Safari 7.0+ */
  
  flex-start = wyrównaj do początku osi poprzecznej
  flex-end   = wyrównaj do końca osi poprzecznej
  center     = wycentruj do środka osi poprzecznej
  baseline   = wyrównaj do linii bazowej osi poprzecznej
  stretch    = wyjustuj - wyrównaj do obu krawędzi osi poprzecznej (nadal respektuje: min-width i max-width)

align-content

Definiuje wyrównanie wierszy zawartości kontenera względem osi poprzecznej.
Uwaga nie wywołuje efektu, jeżeli w zasobniku znajduje się tylko jeden wiersz. 
  align-content:          flex-start | flex-end | center | space-between | space-around | stretch;  (stretch - domyślnie)
  
  -ms-flex-line-pack:     start | end | center | justify | distribute | stretch;                    /* IE 10 */
  -webkit-align-content:  flex-start | flex-end | center | space-between | space-around | stretch   /* Chrome, Safari 7.0+ */
  
  flex-start     = wyrównaj do początku osi poprzecznej
  flex-end       = wyrównaj do końca osi poprzecznej
  center         = wycentruj do środka osi poprzecznej
  space-between  = wyjustuj - wyrównaj do obu krawędzi osi poprzecznej
  space-around   = podziel równo przestrzeń pomiędzy wierszami
  stretch        = wyjustuj - wyrównaj do obu krawędzi osi poprzecznej

właściwości elementów:

order

Zmienia domyślną kolejność elementów.
  order: N;                      (0 - domyślnie)
  
  -ms-flex-order: N;             /* IE 10 */
  -webkit-box-ordinal-group: N;  /* iOS 6-, Safari 3.1-6 */
  -webkit-order: N;              /* Chrome, Safari 6.1+ */
  
  N: -n, 0, +n

align-self

Definiuje wyrównanie elementu względem osi poprzecznej (cross axis). 
  align-self:           auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;  (auto - domyślnie)
  
  -ms-flex-item-align:  auto | stretch | center | start | end | baseline | initial | inherit;             /* IE 10 */ 
  -webkit-align-self:   auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;   /* Safari 7.0+ */
  
  flex-start = wyrównaj do początku osi poprzecznej
  flex-end   = wyrównaj do końca osi poprzecznej
  center     = wycentruj do środka osi poprzecznej
  baseline   = wyrównaj do linii bazowej osi poprzecznej
  stretch    = wyjustuj - wyrównaj do obu krawędzi osi poprzecznej (nadal respektuje: min-width i max-width)
  auto 	     = przejmuje z "align-items" zasobnika lub "stretch" jeśli nie posiada zasobnika
  initial    = domyśne wartości
  inherit    = dziedziczy z rodzica


flex

Zalecana, zbiorcza właściwość dla:
- flex-grow
- flex-shrink
- flex-basis.
Drugi i trzeci parametr jest opcjonalny. 
  flex: G [S B];              (0 1 auto - domyślnie)
  
  -ms-flex: G [S B];          /* IE 10 */
  -webkit-box-flex: G [S B];  /* iOS 6-, Safari 3.1-6 */
  -webkit-flex: G [S B];      /* Safari 6.1+ */

  initial = 0 1 auto
  auto = 1 1 auto
  none = 0 0 auto

  G: 0, +n
  S: 0, +n
  B: 100px, 20%, 5rem, calc(20% -10 ), auto

• flex-grow (podelement: flex)

Definiuje, czy rozciągać elementy powyżje orginalnego rozmiaru i w jakich proporcjach dzielić pomiędzy nie wolną przestrzeń.
  flex-grow: N;          (0 - domyślnie)
  
                         /* brak parametru dla IE10, występuje zbiorczo w: -ms-flex */
  -webkit-flex-grow: N;  /* Chrome, Safari 6.1+ */
  
  N: 0, +n

• flex-shrink (podelement: flex)

Definiuje, czy ściskać elementy poniżej ich orginalnego rozmiaru i jaką część elementu ścisnąć proporcjonalnie do stopnia ściśnięcia innych elementów. 
  flex-shrink: N;         (1 - domyślnie)
  
                           /* brak parametru dla IE10, występuje zbiorczo w: -ms-flex */
  -webkit-flex-shrink: N;  /* Chrome, Safari 6.1+ */
  
  N: 0, +n

• flex-basis (podelement: flex)

Definiuje domyślny rozmiar elementu przed/bez dzielenia przestrzeni. 
  flex-basis: długość | auto | initial | inherit;  (auto - domyślnie)
  
                                                   /* brak parametru dla IE10, występuje zbiorczo w: -ms-flex */
  -webkit-flex-basis: N;                           /* Chrome, Safari 6.1+ */
  
  długość: 100px, 20%, 5rem, calc(20% -10 )
  auto = dopasuj do rozmiarów zawartości obiektu