რა არის Flexbox და როგორ ცენტრირებთ კონტენტს მასთან?

Question

Accepted Answer

**Flexbox** არის ერთ-განზომილებიანი განლაგების სისტემა — ის განალაგებს ელემენტებს ერთ **მწკრივში** ან **სვეტში** და ანაწილებს სივრცეს ამ ხაზზე. ეს არის თანამედროვე პასუხი გასწორების და დიდი ხნის წინ float-ებსა და ხრიკებს მოითხოვებული სიმის პრობლემებზე.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## ორი ღერძი

Flexbox-ს აქვს **მთავარი ღერძი** (მიმართულება, რომლითაც ელემენტები ხვდებიან) და **ჯვარი ღერძი** (პერპენდიკულარული). თვისებები მათ სახელმწიფოში:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## სრულყოფილი ცენტრირება — ცნობილი გამოყენების შემთხვევა

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

ეს სამი სტრიქონი ცენტრირებს შვილს ჰორიზონტალურად და ვერტიკალურად — ამოცანა, რომელიც მნიშვნელოვანი იყო Flexbox-ის წინ.

## ჩვენი შაბლონები

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` პარამეტრები მოიცავს `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## რატომ მნიშვნელოვანია

Flexbox არის ყოველდღიური ინსტრუმენტი navbar-ებისთვის, ღილაკების ჯგუფებისთვის, კარტის რიგებისთვის, ცენტრირებისთვის და ნებისმიერი "ელემენტების ხაზის" განლაგებისთვის.

მთავარი/ჯვარი ღერძის მოდელის გაგება (და რომ `justify-content`/`align-items` შეცვლის მნიშვნელობას, როდესაც თქვენ შეცვლით `flex-direction`) არის ძირითადი გონების მოდელი.

გამოიყენეთ Flexbox 1D განლაგებისთვის და Grid 2D-ისთვის.