როგორ გამოვიყენოთ flexbox გვერდზე ელემენტების განლაგებისთვის?

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

Flexbox-ის ძირითადი კონცეფციაა flex-კონტეინერი და მისი flex-ელემენტები.

Flex-კონტეინერის თვისებები (display: flex;):

• flex-direction: განსაზღვრავს flex-ელემენტების განლაგების მიმართულებას (ძირითადი ღერძი).

  • row (ნაგულისხმევი): ჰორიზონტალურად, მარცხიდან მარჯვნივ.
  • row-reverse: ჰორიზონტალურად, მარჯვნიდან მარცხნივ.
  • column: ვერტიკალურად, ზევიდან ქვემოთ.
  • column-reverse: ვერტიკალურად, ქვედა ზევით.

• flex-wrap: განსაზღვრავს, გადაიტანენ თუ არა flex-ელემენტები ახალ ხაზზე, თუ ვერ მოერგება ერთ ხაზში.

  • nowrap (ნაგულისხმევი): ყველა ელემენტი ერთ ხაზზე.
  • wrap: გადადის ახალ ხაზზე.
  • wrap-reverse: გადადის ახალ ხაზზე, მაგრამ საპირისპირო წესით.

• justify-content: განლაგება ძირითადი ღერძის მიხედვით.

  • flex-start (ნაგულისხმევი): დასაწყისში.
  • flex-end: ბოლოში.
  • center: ცენტრში.
  • space-between: თანაბარი სივრცე შორის.
  • space-around: თანაბარი სივრცე გარშემო.
  • space-evenly: თანაბარი სივრცე შორის და გარშემო.

• align-items: ელემენტების განლაგება პარალელურ ღერძზე.

  • stretch (ნაგულისხმევი, თუ სიმაღლე/სიგანე არ არის მითითებული): ელემენტები იწელება პარალელურ ღერძზე.
  • flex-start: დასაწყისში.
  • flex-end: ბოლოში.
  • center: ცენტრში.
  • baseline: ტექსტის ბაზის ხაზზე.

• align-content: ხაზების განლაგება, როდესაც არის გადატანა (flex-wrap: wrap).

  • stretch (ნაგულისხმევი): ხაზები იწელება.
  • flex-start: დასაწყისში.
  • flex-end: ბოლოში.
  • center: ცენტრში.
  • space-between: თანაბარი სივრცე ხაზებს შორის.
  • space-around: თანაბარი სივრცე გარშემო.

• gap, row-gap, column-gap: სივრცე ელემენტებს შორის.

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

Flex-ელემენტების თვისებები (მხოლოდ პირდაპირი შვილები):

• order: განსაზღვრავს ელემენტის განლაგების წესს (ნაგულისხმევი 0). ნაკლები მნიშვნელობები პირველია.

• flex-grow: განსაზღვრავს, რამდენად შეიძლება ელემენტი გაიზარდოს, რომ დაიკავოს ხელმისაწვდომი სივრცე.

• flex-shrink: განსაზღვრავს, რამდენად შეიძლება ელემენტი შემცირდეს, თუ სივრცე ნაკლებია.

• flex-basis: განსაზღვრავს საწყის ზომას, სანამ სივრცე დაიყოფა.

• flex: მოკლე ფორმა flex-grow, flex-shrink, flex-basis.

• align-self: გადაჭრის align-items-ის მნიშვნელობას კონკრეტულ ელემენტზე.

.flex-item {
  order: 2; /* მეორე იქნება */
  flex-grow: 1; /* დაიკავებს დარჩენილ სივრცეს */
  flex-shrink: 0; /* არ შემცირდება */
  flex-basis: 100px; /* საწყისი ზომა 100px */
  align-self: flex-start; /* დასაწყისში */
}

.another-item {
  flex: 1 1 auto; /* ზრდა: 1, შემცირება: 1, საწყისი: auto */
}

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