За шта се користи flex у CSS-у?

Flexbox se koristi za kreiranje jednosmernih rasporeda elemenata u kontejneru. Omogućava upravljanje poravnanjem, rasporedom prostora i redosledom elemenata.

Osnovni pojmovi:

• Flex Container: Roditeljski element kojem se dodeljuje display: flex ili display: inline-flex.
• Flex Items: Deca elementi Flex Container-a.
• Main Axis: Glavna osa Flex Container-a. Određuje se svojstvom flex-direction. Podrazumevano je horizontalno (row).
• Cross Axis: Sporedna osa, perpendicularna Main Axis-u.

Ključne osobine za Flex Container:

• display: Određuje da li je element flex-kontejner (flex ili inline-flex).
• flex-direction: Postavlja pravac glavne ose (row, row-reverse, column, column-reverse).
• justify-content: Poravnava flex-elemnte duž glavne ose (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Poravnava flex-elemnte duž sporedne ose (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Određuje da li će flex-elemnti preći u novi red/stubac pri nedostatku mesta (nowrap, wrap, wrap-reverse).

Ključne osobine za Flex Items:

• order: Postavlja vizuelni redosled flex-elemnta (podrazumevano 0).
• flex-grow: Određuje koliko flex-elemnt može da se poveća u odnosu na druge (podrazumevano 0).
• flex-shrink: Određuje koliko flex-elemnt može da se smanji u odnosu na druge (podrazumevano 1).
• flex-basis: Postavlja početnu veličinu flex-elemnta pre raspodele slobodnog prostora (podrazumevano auto).
• align-self: Preko-uređuje poravnavanje flex-elemnta duž sporedne ose za pojedinačni element.

Primer upotrebe:

.container {
  display: flex;
  justify-content: center; /* Poravnanje na sredinu duž glavne ose */
  align-items: center; /* Poravnanje na sredinu duž sporedne ose */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Ovo omogućava lako centriranje elemenata, kreiranje adaptivnih mreža i upravljanje prostorom između elemenata.