Flexbox რა მიზნით გამოიყენება?

Flexbox CSS-ში მოქნილი და ადაპტირებული განლაგებების შესაქმნელად გამოიყენება. იგი მარტივია ელემენტების სწორად განლაგებისა და განაწილებისთვის კონტეინერში, ავტომატურად მორგებით მათ ზომებს და პოზიციებს ხელმისაწვდომ სივრცეზე დაყრდნობით.

Flexbox-ის ძირითადი კონცეფციები:

• Flex კონტეინერი: ელემენტი, რომელსაც ემატება display: flex; ან display: inline-flex;. შეიცავს flex ელემენტებს.
• Flex ელემენტები: პირდაპირი შვილები flex კონტეინერის.

Flexbox საშუალებას აძლევს კონტროლს:

• ელემენტების განლაგების მიმართულებაზე (flex-direction)
• ელემენტების გადატანაზე შემდეგი ხაზი/სვეტი (flex-wrap)
• ელემენტების სწორებაზე მთავარი ღერძის მიხედვით (justify-content)
• ელემენტების სწორებაზე გადახრილი ღერძის მიხედვით (align-items და align-content)
• ელემენტების ჩვენების წესზე (order)
• თავისუფალი სივრცის განაწილებაზე ელემენტებს შორის (flex-grow, flex-shrink, flex-basis)

ძირითადი გამოყენების მაგალითი:

.კონტეინერი {
  display: flex;
  justify-content: center; /* ჰორიზონტალური ცენტრი */
  align-items: center; /* ვერტიკალური ცენტრი */
}

.ელემენტი {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="კონტეინერი">
  <div class="ელემენტი"></div>
  <div class="ელემენტი"></div>
  <div class="ელემენტი"></div>
</div>