Šta je Flexbox?

Flexbox (Fleksibilni raspored kutije) — to je CSS modul namenjen za kreiranje složenih i prilagodljivih rasporeda. Omogućava upravljanje rasporedom, poravnanjem i raspodelom prostora između elemenata kontejnera, čak i ako su njihovi dimenzije nepoznate ili dinamične.

Osnovne koncepcije Flexbox-a:

• Glavna osa (main axis): Osa duž koje se postavljaju elementi. Podrazumevano je horizontalna (sa leva na desno).
• Prečna osa (cross axis): Osa koja je perpendicularna glavnoj osi. Podrazumevano je vertikalna (odozgo na dole).
• Kontejner (flex container): Element na koji se primenjuju svojstva Flexbox-a (display: flex ili display: inline-flex).
• Elementi (flex items): Dete elementi kontejnera.

Svojstva za Flex kontejner:

• display: flex ili inline-flex
• flex-direction: Određuje pravac glavne ose (row, row-reverse, column, column-reverse)
• flex-wrap: Određuje da li će se elementi prelamati u novi red (nowrap, wrap, wrap-reverse)
• justify-content: Poravnanje elemenata duž glavne ose (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Poravnanje elemenata duž prečne ose (flex-start, flex-end, center, baseline, stretch)
• align-content: Poravnanje redova ili kolona duž prečne ose u višerednom kontejneru (flex-start, flex-end, center, space-between, space-around, stretch)

Svojstva za Flex elemente:

• order: Određuje redosled elementa u kontejneru
• flex-grow: Određuje koliko element treba da se poveća da popuni dostupni prostor
• flex-shrink: Određuje koliko element treba da se smanji ako nema dovoljno mesta
• flex-basis: Određuje početnu veličinu elementa pre raspodele prostora
• flex: Skraćeno svojstvo za flex-grow, flex-shrink i flex-basis
• align-self: Poništava poravnavanje elementa duž prečne ose (flex-start, flex-end, center, baseline, stretch, auto)

Primer upotrebe:

/* Kontejner */
.container {
  display: flex; /* Uključuje flexbox */
  flex-direction: row; /* Elementi se postavljaju u red */
  justify-content: center; /* Poravnanje na sredinu horizontalno */
  align-items: center; /* Poravnanje na sredinu vertikalno */
  height: 200px; /* Postavlja visinu kontejnera */
  border: 1px solid black;
}

/* Elementi */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox znatno olakšava kreiranje prilagodljivih rasporeda u poređenju sa tradicionalnim metodama (float, inline-block, table).