CSS-ში flex რა მიზნით გამოიყენება?

ფლექსბოქსი გამოიყენება ერთმარყუჟული განლაგების შექმნისთვის კონტეინერში. იგი საშუალებას აძლევს მართოს განლაგება, სივრცის განაწილება და ელემენტების სია.

ძირითადი ცნებები:

• Flex Container: მშობელი ელემენტი, რომელსაც მიენიჭება display: flex ან display: inline-flex.
• Flex Items: შვილობილი ელემენტები Flex Container-ში.
• Main Axis: მთავარი ღერძი Flex Container-ის. განსაზღვრულია flex-direction-ით. სტანდარტულად ჰორიზონტალური (row).
• Cross Axis: გვერდითი ღერძი, რომელიც პარალელური არაა Main Axis-ს.

ძირითადი თვისებები Flex Container-ისთვის:

• display: განსაზღვრავს, არის თუ არა ელემენტი flex-კონტეინერი (flex ან inline-flex).
• flex-direction: განსაზღვრავს მთავარი ღერძის მიმართულებას (row, row-reverse, column, column-reverse).
• justify-content: განლაგებს flex-ელემენტებს მთავარი ღერძის მიხედვით (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: განლაგებს flex-ელემენტებს გვერდითი ღერძის მიხედვით (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: განსაზღვრავს, უნდა თუ არა flex-ელემენტებმა გადაინაცვლონ ახალ ხაზზე ან სვეტზე (nowrap, wrap, wrap-reverse).

ძირითადი თვისებები Flex Items-ისთვის:

• order: განსაზღვრავს ვიზუალურ წესრიგს (ძირითადი მნიშვნელობა 0).
• flex-grow: განსაზღვრავს, რამდენად შეიძლება ელემენტი გაიზარდოს სხვებთან შედარებით (0).
• flex-shrink: განსაზღვრავს, რამდენად შეიძლება ელემენტი შემცირდეს სხვებთან შედარებით (1).
• flex-basis: განსაზღვრავს საწყის ზომას, სანამ თავისუფალი სივრცე განაწილდება (auto).
• align-self: ცალკეული ელემენტის განლაგება გვერდითი ღერძის მიხედვით.

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

.container {
  display: flex;
  justify-content: center; /* განლაგება ცენტრში მთავარი ღერძის მიხედვით */
  align-items: center; /* განლაგება ცენტრში გვერდითი ღერძის მიხედვით */
  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>

ეს საშუალებას აძლევს მარტივად ცენტრში განლაგებას, ადაპტირებად ქსელებს და სივრცის მართვას შორის ელემენტებს.