Flexbox CSS špikeris

Visa dokumentācija par elementu flex atrodas oficiālajā vietnē.

display

flex inline-flex

Te teksts
1
2
3
4
.parent {
  display: flex;
}Nokopēts!
Te teksts
1
2
3
4
.parent {
  display: inline-flex;
}Nokopēts!

Daudzfunkcionāla īpašība, kas nosaka, kā objekts ir jāparāda dokumentā.

Attiecas uz: visiem elementiem.

flex
Elements uzvedas kā bloku elements un izvieto saturu atbilstoši flex modelim.
inline-flex
Elements uzvedas kā rindu elements un izvieto saturu atbilstoši flex modelim.

flex-direction

row row-reverse column column-reverse

1
2
3
4
.parent {
  display: flex;
  flex-direction: row;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}Copied!
1
2
3
4
.parent {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
}Copied!

Stila atribūts flex-direction nosaka galveno asu virzienu konteinerā un tādējādi norāda flexboksu stāvokli konteinerā. Pašu virzienu ietekmē arī konteinera dir atribūta vērtība.

Attiecas uz: flex konteineriem.

row
Galvenā ass ir novirzīta tāpat kā teksta orientācija, pēc noklusējuma no kreisās uz labo pusi. Ja dir vērtība ir norādīta kā rtl, tad ass virziens iet no labās uz kreiso pusi.
row-reverse
Tāpat kā row vērtība, bet sākuma un beigu punkti mainās vietām, un galvenā ass ir vērsta no labās uz kreiso pusi. Ja dir vērtība ir norādīta kā rtl, tad ass virziens iet no kreisās uz labo pusi.
column
Galvenā ass ir vertikāla un vērsta no augšas uz leju.
column-reverse
Galvenā ass ir vertikāla, bet sākuma un beigu punktu pozīcija mainās, un ass ir vērsta no apakšas uz augšu.

flex-wrap

nowrap wrap wrap-reverse

1
2
3
4
.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  height: 100%;
}
.child {
  width: 40%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}
.child {
  width: 40%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap-reverse;
  height: 100%;
}
.child {
  width: 40%;
}Nokopēts!

Stila atribūts flex-wrap norāda, vai fleksboksiem jāatrodas vienā rindā vai var aizņemt arī vairākas rindas. Ja rindu pārnešana ir atļauta, tad īpašība atļauj kontrolēt arī rindu izkārtojuma virzienu.

Attiecas uz: flex konteineriem.

Vērtība pēc noklusējuma: nowrap

nowrap
Fleksboksi izkārtojas vienā rindā.
wrap
Fleksboksi izkārtojas vairākās rindās, to virzienu nosaka stila atribūts flex-direction.
wrap-reverse
Fleksboksi izkārtojas vairākās rindās, to virziens ir pretējs stila atribūta flex-direction vērtībai.

flex-flow

row nowrap column-reverse column wrap row-reverse wrap-reverse

1
2
3
4
.parent {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
}
.child {
  width: 40%;
  height: 40%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-flow: column-reverse;
  height: 100%;
}
.child {
  width: 40%;
  height: 40%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-flow: column wrap;
  height: 100%;
}
.child {
  width: 40%;
  height: 40%;
}Copied!
1
2
3
4
.parent {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  height: 100%;
}
.child {
  width: 40%;
  height: 40%;
}Nokopēts!

Stila atribūts flex-flow ir saīsināts pieraksts atribūtiem flex-direction un flex-wrap.

Attiecas uz: flex konteineriem.

Vērtība pēc noklusējuma: row nowrap

order

-1 0 1

1
2
3
4
.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.child-active {
  order: -1;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.child-active {
  order: 0;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.child-active {
  order: 1;
}Nokopēts!

Stila atribūts order nosaka secību, kādā fleksboksi tiek parādīti flex konteinerā. Elementi ir sakārtoti atbilstoši atribūta order vērtībai - no mazākā līdz lielākajam. Ar vienādām atribūta vērtībām elementi tiek parādīti tādā secībā, kādā tie parādās lapas kodā.

Attiecas uz: flex elementiem.

Vērtība pēc noklusējuma: 0

justify-content

flex-start flex-end center space-between space-around space-evenly

1
2
3
4
.parent {
  display: flex;
  justify-content: flex-start;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  justify-content: center;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  justify-content: space-between;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  justify-content: space-around;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
}Nokopēts!

Stila atribūts justify-content nosaka, kā pārlūks sadala brīvo vietu ap fleksboksiem gar konteinera galveno asi. Tas tiek darīts pēc izmēru un automātiskās atkāpju pielietošanas, izņemot gadījumus, kad vismaz vienam elementam atribūts flex-grow ir lielāks nekā nulle. Šajā gadījumā manipulācijām nav atlicis brīvas vietas.

Attiecas uz: flex konteineriem.

Vērtība pēc noklusējuma: flex-start

flex-start
Fleksboksi piespiesti pie rindas sākuma.
flex-end
Fleksboksi piespiesti pie rindas beigām.
center
Fleksboksi izvietojas kopā rindas centrā.
space-between
Fleksboksi vienmērīgi tiek sadalīti pa visu rindu. Pirmais un pēdējais elements tiek piespiests pie attiecīgās konteinera malas.
space-around
Fleksboksi vienmērīgi tiek sadalīti pa visu rindu. Tukšā vieta pirms pirmā un pēc pēdējā elementa ir vienāda ar pusi no atstarpes starp diviem blakus esošajiem elementiem.
space-evenly
Fleksboksi tiek sadalīti tā, lai attālums starp jebkuriem diviem blakus esošajiem elementiem, kā arī pirms pirmā un pēc pēdējā būtu vienāds.

align-items

flex-start flex-end center baseline stretch

1
2
3
4
.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  align-items: flex-end;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  align-items: center;
  height: 100%;
}Nokopēts!

1

2

3

4
.parent {
  display: flex;
  align-items: baseline;
  height: 100%;
}Nokopēts!
1
2
3
4
.parent {
  display: flex;
  align-items: stretch;
  height: 100%;
}Nokopēts!

Stila atribūts align-items izlīdzina fleksboksa elementus konteinera iekšpusē perpendikulārā virzienā.

Attiecas uz: flex konteineriem.

Vērtība pēc noklusējuma: stretch

flex-start
Fleksboksi izlīdzinās pie konteinara augšējās malas.
flex-end
Fleksboksi izlīdzinās pie konteinara apakšējās malas.
center
Fleksboksi izlīdzinās uz konteinara vidus ass.
baseline
Fleksboksi izlīdzinātās uz savas bāzes līnijas.
Stretch
Fleksboksi izstiepjas tā, lai aizņemtu visu pieejamo konteinera vietu.

align-self

flex-start flex-end center baseline stretch

1
2
3
4
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: flex-start;
}Nokopēts!
1
2
3
4
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: flex-end;
}Nokopēts!
1
2
3
4
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: center;
}Nokopēts!

1

2

3

4
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: baseline;
}Nokopēts!
1
2
3
4
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: stretch;
}Nokopēts!

Stila atribūts align-self izlīdzina tekošās rindas fleksboksa elementu, pārrakstot align-item vērtību.

Attiecas uz: flex elementiem.

Vērtība pēc noklusējuma: auto

flex-start
Fleksboks novietojas pie konteinara augšējās malas.
flex-end
Fleksbokss novietojas pie konteinara apakšējās malas.
center
Fleksbokss novietojas uz konteinara vidus ass.
baseline
Fleksbokss izlīdzinātās uz savas bāzes līnijas.
Stretch
Fleksbokss izstiepjas tā, lai aizņemtu visu pieejamo konteinera vietu.

align-content

flex-start flex-end center space-between space-around space-evenly stretch

1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100%;
}
.child {
  width: 30%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  height: 100%;
}
.child {
  width: 30%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
}
.child {
  width: 30%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
}
.child {
  width: 30%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 100%;
}
.child {
  width: 30%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  height: 100%;
}
.child {
  width: 30%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  height: 100%;
}
.child {
  width: 30%;
} Nokopēts!

Stila atribūts align-content nosaka līniju vertikālo izlīdzināšanu fleksa konteinerī, pie nosacījuma, ja ir brīva vieta.

Attiecas uz: flex konteineri.

Vērtība pēc noklusējuma: strench

flex-start
Rindas novietojas pie konteinara augšējās malas, katra nākošā rinda pieguļ iepriekšējai rindai.
flex-end
Rindas novietojas pie konteinara apakšējās malas, katra nākošā rinda pieguļ iepriekšējai rindai.
center
Rindas novietojas uz konteinara vidus ass.
space-between
Rindas tiek vienmērīgi sadalītas konteinerī, un attālums starp tām ir vienāds.
space-around
Rindas ir vienmērīgi sadalītas tā, lai atstarpe starp divām blakus esošajām rindām būtu vienāda. Tukšā vieta pirms pirmās un pēc pēdējās rindas ir vienāda ar pusi no vietas starp divām blakus esošajām rindām.
space-evenly
Rindas tiek sadalītas vienmērīgi. Tukša vieta pirms pirmās un pēc pēdējās rindas ir tāda paša platuma kā citām rindām.
Stretch
Rindas vienmērīgi izstiepjas, aizpildot brīvo vietu.

flex-grow

0 1

1
2
3
4
.parent {
  display: flex;
  height: 100%;
}
.child-active {
  flex-grow: 0;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  height: 100%;
}
.child-active {
  flex-grow: 1;
} Nokopēts!

Stila atribūts flex-grow nosaka fleksboksa augšanas koeficentu noteiktajam skaitlim. Negatīva vērtība nav pieļaujama. (Šitam vēlāk būs sīkāks paskaidrojums, jo pirmajā brīdī ne visai saprotams)

Attiecas uz: flex elementiem.

Vērtība pēc noklusējuma: 0

flex-shrink

0 1

1
2
3
4
.parent {
display: flex;
  height: 100%;
}
.child {
  width: 40%;
}
.child-active {
  flex-shrink: 0;
} Nokopēts!
1
2
3
4
.parent {
display: flex;
  height: 100%;
}
.child {
  width: 40%;
}
.child-active {
  flex-shrink: 1;
} Nokopēts!

Stila atribūts flex-shrink nosaka fleksboksa saspiešanas koeficentu noteiktajam skaitlim. Negatīva vērtība nav pieļaujama.

Attiecas uz: flex elementiem.

Vērtība pēc noklusējuma: 1

flex-basis

30% 50% content

1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
}
.child-active {
  flex-basis: 30%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
}
.child-active {
  flex-basis: 50%;
} Nokopēts!
1
2
3
4
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
}
.child-active {
  flex-basis: content;
} Nokopēts!

Stila atribūts flex-basis nosaka fleksboksa bāzi, kas ir sākotnējais elementa izmērs. Līdzīgas platuma un augstuma īpašībām, kurām tiek pievienota vēl viena vērtība — elementa saturs.

Attiecas uz: flex elementiem.

Vērtība pēc noklusējuma: auto