რა არის Flexbox?

Flexbox (Flexible Box Layout) — ეს CSS-ის ერთმეტრიანი მოდელი არის, რომელიც განკუთვნილია სივრცის განაწილებისთვის ელემენტებს შორის კონტეინერში და ძლიერი შესაძლებლობებით განლაგებისთვის. ის საშუალებას აძლევს ადვილად მართოთ ზომები, წესრიგი და განლაგება შვილობილი ელემენტების (flex-ელემენტების) შიგნით მშობელ კონტეინერში (flex-კონტეინერში), независимо მათი თავდაპირველი წესრიგისა ან ზომების.

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

• Flex-კონტეინერი: ელემენტი, რომლისთვისაც მითითებულია display: flex ან display: inline-flex. სწორედ ამ კონტეინერში განისაზღვრება განლაგების წესები მის პირდაპირი შვილობილი ელემენტებისთვის.
• Flex-ელემენტები: პირდაპირი შვილობილი ელემენტები flex-კონტეინერის. მათზე ვრცელდება Flexbox-ის თვისებები, რომლებიც განსაზღვრავენ მათ ქცევას კონტეინერში.
• ძირითადი ღერძი (main axis): ღერძი, რომლის მიხედვითაც განლაგებულია flex-ელემენტები. ჩვეულებრივ ჰორიზონტალური (მარცხნიდან მარჯვნივ), მაგრამ შეიძლება შეიცვალოს flex-direction-ით.
• პერიფერიული ღერძი (cross axis): ღერძი, რომელიც პარალელური არაა ძირითადი ღერძის.
• ძირითადი დასაწყისი (main start) / ძირითადი ბოლო (main end): დასაწყისი და ბოლო ძირითადი ღერძის გასწვრივ.
• პერიფერიული დასაწყისი (cross start) / პერიფერიული ბოლო (cross end): დასაწყისი და ბოლო პერიფერიული ღერძის გასწვრივ.

Flexbox-ის ძირითადი თვისებები კონტეინერისთვის:

• display: განსაზღვრავს, რომ ელემენტი არის flex-კონტეინერი (flex ან inline-flex).
• flex-direction: განსაზღვრავს ძირითადი ღერძის მიმართულებას (row, row-reverse, column, column-reverse).
• flex-wrap: განსაზღვრავს, გადაიწევს თუ არა flex-ელემენტები ახალ ხაზზე/სვეტზე, თუ ადგილი არ არის (nowrap, wrap, wrap-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).
• align-content: განლაგებს flex-ელემენტების ხაზებს (თუ არის რამდენიმე flex-wrap-ის გამო) პერიფერიული ღერძის გასწვრივ.

Flex-ელემენტებისთვის ძირითადი თვისებები:

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

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

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* ქმნის კონტეინერს flex-კონტეინერად */
  justify-content: center; /* განლაგებს ელემენტებს ცენტრში ძირითადი ღერძის */
  align-items: center; /* განლაგებს ელემენტებს ცენტრში პერიფერიული ღერძის */
  height: 200px; /* დემონსტრაციისთვის განლაგების */
  border: 1px solid black;
}

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

Flexbox-ის ძირითადი უპირატესობები:

• ელემენტების ჰორიზონტალურ და ვერტიკალურ განლაგების მარტივი მეთოდი.
• სივრცის მოქნილი განაწილება ელემენტებს შორის.
• ელემენტების წესრიგის ადვილად შეცვლა.
• რეაგირებადი დიზაინი float და position-ის გამოყენების გარეშე.
• თანამედროვე ბრაუზერებში კარგი მხარდაჭერა.