როგორ დავაყენოთ flexbox-ის თვისებები?

განსაზღვრება თვისებები კონტეინერს (ელემენტს, რომელსაც აქვს display: flex ან display: inline-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 (თითოეულ ელემენტს გარშემო თანაბარი სივრცე).
• align-items: იწონებს ფლექს-ელემენტებს გადატანითი ღერძის გასწვრივ. შესაძლო მნიშვნელობები: stretch (ნაგულისხმევი, ელემენტები იწელება კონტეინერის სიმაღლეზე), flex-start (კონტეინერის დასაწყისი), flex-end (კონტეინერის ბოლო), center, baseline (ტექსტის ბაზის ხაზზე იწონება).
• align-content: იწონებს ფლექს-ელემენტების ხაზებს (როდესაც გამოიყენება flex-wrap) გადატანითი ღერძის გასწვრივ. არ მოქმედებს, თუ მხოლოდ ერთი ხაზი. შესაძლო მნიშვნელობები: stretch (ნაგულისხმევი), flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: განსაზღვრავს მანძილს ფლექს-ელემენტებს შორის მთავარი და გადატანითი ღერძის მიმართულებით.

ელემენტებისთვის (ფლექს-კონტეინერის პირდაპირი შვილი) განკუთვნილი თვისებები:

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

მაგალითი:

.flex-container {
  display: flex; /* ვქმნით ელემენტს ფლექს-კონტეინერად */
  flex-direction: row; /* განლაგება რიგში */
  justify-content: center; /* განლაგება მთავარი ღერძის ცენტრში */
  align-items: center; /* განლაგება გადატანითი ღერძის ცენტრში */
  gap: 10px; /* მანძილი ელემენტებს შორის */
}

.flex-item {
  flex-grow: 1; /* ელემენტი შეიძლება გაიზარდოს */
  flex-basis: 100px; /* საწყისი ზომა */
}

.special-item {
  order: -1; /* ეს ელემენტი იქნება პირველზე */
  align-self: flex-end; /* გადამწყვეტი განლაგება გადატანითი ღერძის მიხედვით */
}