რა არის Flexbox?

Flexbox (ლამაზი ყუთის განლაგება) — ეს CSS მოდული არის შექმნილი რთული და რეაგირებადი განლაგებების შესაქმნელად. იგი საშუალებას აძლევს მართოს ელემენტების განლაგება, მორგება და სივრცის განაწილება კონტეინერში, მაშინაც კი, თუ მათი ზომები უცნობია ან დინამიური.

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

• ძირითადი ღერძი (main axis): ღერძი, რომლის მიხედვითაც ელემენტები იკავებენ ადგილს. ნაგულისხმევია ჰორიზონტალური (მარცხიდან მარჯვნივ).
• პერეპენდიკულო ღერძი (cross axis): ღერძი, რომელიც პარალელური არაა ძირითადი ღერძის. ნაგულისხმევია ვერტიკალური (ზევიდან ქვემოთ).
• კონტეინერი (flex container): ელემენტი, რომელსაც აქვს გამოყენებული display: flex ან display: inline-flex.
• ელემენტები (flex items): შვილეული ელემენტები კონტეინერის.

Flex კონტეინერის თვისებები:

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

Flex ელემენტების თვისებები:

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

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

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

/* ელემენტები */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox მნიშვნელოვნად ამარტივებს რეაგირებადი განლაგებების შექმნას შედარებით ტრადიციულ მეთოდებთან (float, inline-block, table).