Šeit atlasītājs var atsaukties uz jebkuru no šiem elastīguma atribūtiem

• Atribūtu atlasītājs – Attribute selector

• Klases atlasītājs – Class Selector

• ID atlasītājs – ID Selector

• Tipu atlasītāji – Type Selectors

• Universālie selektori – Universal Selectors

Displejs ir saistīts ar to, kā vēlaties parādīt selektoru. Displeja iestatīšana uz elastīgu padara doto atlasītāju par elastīgu lodziņu. Iestatot displeju uz inline-flex, selektors kļūst par flex box konteineru, kamēr tas būs iekļauts inline.

Flexbox konteinera īpašības

flex-direction: row | row-reverse | column | column-reverse

Ir iespējams norādīt virzienu, kuram sekos jūsu elementi. Tradicionāli teksts iet no kreisās puses uz labo, kas ir flex noklusējuma iestatījums, taču to var iestatīt no labās puses uz kreiso vai pat no augšas uz leju. Četri elastīgie virzieni ir:

• row – rinda: sakārtota no kreisās puses uz labo
• row-reverse – rinda-reverss: sakārtots no labās puses uz kreiso
• column – kolonna: sakārtota no augšas uz leju
• column-reverse – kolonna-reverss: sakārtots no apakšas uz augšu.

flex-wrap: wrap | nowrap

Standarta izkārtojums ir attēlot elementus no kreisās puses uz labo taisnā līnijā. Aptīšanas “wrap” funkcija ļauj to pielāgot tā, lai tas atbilstu loga izmēram, kurā tiek rādīta lapa.

• wrap: Automātiski aptiniet (pielāgojiet) lapas elementus ja loga telpa kļūst mazāka.
• Nowrap: Noklusējuma iestatījums, vienumi vietā stingri un nereaģē uz loga izmēra pielāgojumiem.

align-items: flex-start | flex-end | center |Stretch

Tas nosaka, kā elastīgie vienumi ir jānovieto lapā. Vienumus var izlīdzināt dažādos veidos

• Flex-start: Līdzīgi kā standarta rakstīšanai, vienumi sākas augšējā kreisajā stūrī un tiek novietoti no kreisās puses uz labo
• Flex-end: Pozīcija sākas apakšējā labajā stūrī.
• Center: Vienums ir novietots no centra.
• Stretch: vienums paplašinās, lai aizpildītu konteineru.

justify-content: flex-start | flex-end | center | space-between | space-evenly

Pamatojuma saturs nosaka elastīgo vienumu izlīdzināšanu.

• Flex-start: iet no labās uz kreiso pa galveno asi.
• Flex-end: iet no kreisās puses uz labo pa galveno asi.
• Center: Sākot no vidus, izlīdzinājumi tiek paplašināti no turienes.
• Space-between: pirmais un pēdējais vienums ir vienā līmenī ar kreiso un labo sienu, katrs pārējais ir vienmērīgi izvietots.
• Space-evenly: katrs elements atrodas vienādā attālumā viens no otra un robežsienas

Flexbox vienumu rekvizīti (child)

flex-grow: flex galvenā izmēra faktors

Šis atribūts ļauj elastīgajam konteineram augt proporcionāli citiem esošajiem konteineriem.

flex-shrink: flex galvenā izmēra faktors

Tas ļauj elementiem sarukt attiecībā pret apkārtējiem priekšmetiem.

flex-basis: auto | galvenā izmēra faktors | mērvienība

Iestata vienuma sākotnējo galveno izmēru. To var ignorēt, ja ir konfigurēti citi stilizēti elementi.

order:position in flex /* Pēc noklusējuma iestatiet augošu */

Vienumu standarta pozicionēšana ir pēc avota secības, taču šī funkcija ļaus konfigurēt, kur lapā tiek parādīti vienumi.

align-self: start | center | end | stretch

Tas nosaka, kur lapā tiks novietoti pakārtotie vienumi. Līdzīgi kā galvenajiem elastīguma atribūtiem, sākums ir pa kreisi un beigas ir pa labi.