Flexbox diseinuan, guraso-elementu batek eta haren ondorengo hainbat elementuk hartzen dute parte.

Guraso-elementuak malgutasuna hartzen du display ezaugarriak flex balioa hartzen duenean.

Guraso-elementuaren flexbox ezaugarriak honako hauek dira:

• flex-direction ezaugarria. Edukiontziak aleak zein noranzkotan pilatzen dituen zehazten du. Izan ditzakeen balioak hauek dira:
  • column: zutabeetan jartzeko.

• column-reverse: zutabeetan behetik gora jartzeko.

• row: errenkadetan jartzeko.

• row-reverse: errenkadetan, eskuinetik ezkerrera jartzeko

• flex-wrap ezaugarria. Edukiontziak zehazten du nola bildu barneko elementuak:
  • wrap. Leihoaren tamainaren arabera, elementuak zutabeetan egokitzen dira haren zabalerara.

• nowrap. Elementuak ez dira egokitzen leihoaren zabalerara. Sartzen ez direnak ez dira ikusten

• wrap-reverse. Edukiontziak barruko elementuak pilatzen ditu, leihoaren zabalerara egokituta, baina behetik gorako noranzkoan.

• flex-flow ezaugarria. Aurreko ezaugarri biak (flex-direction eta flex-wrap) agindu bakar batean jartzeko.

• justify-content ezaugarria. Edukiontziko elementuak lerrokatzen ditu, balio hauen arabera:
  • Center. Elementuak erdian lerrokatzen ditu.

• flex-start. Elementuak edukiontziaren hasieran lerrokatzen ditu

• flex-end. Elementuak edukiontziaren amaieran lerrokatzen ditu.

• space-around. Elementuen artean espazio berdina dago.

• space-between. Elementuen arteko tartea berdina da.

• align-items ezaugarria. Edukiontziko elementuak bertikalean lerrokatzen ditu, balio hauen arabera:
  • center. Elementuak erdian lerrokatzen ditu.

• flex-start. Elementuak edukiontziaren hasieran lerrokatzen ditu

• flex-end. Elementuak edukiontziaren amaieran lerrokatzen ditu.

• strectch. Elementuak goitik behera hedatzen dira.

• baseline. Elementuak oinarri-lerroan lerrokatzen dira.

Edukiontzi baten ondorengo zuzenak elementu malguak (flexible items) bihurtzen dira automatikoki.

Ondorengo elementuaren flexbox ezaugarriak (elementu bakoitzean style=” ” aginduarekin adierazten da) honako hauek dira :

• order ezaugarria. Elementuen ordena zehazteko.

• flex-grow ezaugarria. Elementu bat gainerako elementuekin alderatuta zenbat hasiko den zehazten du. Lehenetsitako balioa 0 da.

• flex-shrink ezaugarria. Elementu bat gainerako elementuekin alderatuta zenbat txikituko den zehazten du. Haren eragina leihoa txikitzen denean ikusiko da. Lehenetsitako balioa 1 da.

• flex-basis ezaugarria. Elementu bakoitzari dagokion zabalera ematen dio.

• flex ezaugarria. Modu laburrean, flex-grow, flex-shrink eta flex-basis jartzeko.

Bigarren elementua: ez da haziko, ez txikituko, leihoa handitu eta txikitzean; gainera, 200 pixeleko zabalera izango du.

• align-self ezaugarria. Lehenetsitako lerrokatzea kenduko du: flex-start erabilita, elementua edukiontziaren goialdearekin lerrokatuko du. eta, flex-end erabilita, edukiontziaren behealdearekin