Flexbox generatoru və playground

Necə istifadə etmək olar

1. Konteyner bölməsində flex-direction, flex-wrap, justify-content, align-items, align-content və gap dəyərlərini seçin. Element sayını «−» və «+» düymələri ilə 1-dən 8-ə qədər dəyişin.
2. Önizləmədə istənilən elementə klikləyin (və ya klaviaturada Tab və Enter ilə seçin) — həmin elementin flex-grow, flex-shrink, flex-basis, align-self və order sahələri açılır.
3. Oxlara fikir verin: justify-content əsas ox boyunca, align-items isə köndələn ox boyunca işləyir; flex-direction bu oxların istiqamətini dəyişir.
4. «Kopyala» düyməsini basın. Kod .container qaydasını və yalnız standart olmayan dəyəri olan elementlər üçün .item:nth-child(N) qaydalarını ehtiva edir.

Bu necə işləyir

Konteyner və elementlər

display: flex yazılan element flex konteynerə çevrilir, onun birbaşa uşaqları isə flex elementlər olur. Ümumi qaydaları konteyner təyin edir (flex-direction, justify-content, align-items, gap), hər elementin davranışını isə onun öz xassələri tənzimləyir (flex-grow, flex-basis, align-self, order).

.container {
  display: flex;
  gap: 8px;
}

Əsas ox və köndələn ox

flex-direction: row olduqda əsas ox soldan sağa, köndələn ox isə yuxarıdan aşağıya gedir; column olduqda oxlar yerini dəyişir. justify-content elementləri əsas ox boyunca paylayır (flex-start, center, space-between, space-evenly), align-items isə köndələn ox boyunca düzləyir. align-items-in standart dəyəri stretch-dir: elementlər köndələn ox üzrə konteynerin ölçüsünə qədər uzanır.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

flex-grow, flex-shrink və flex-basis

flex-basis elementin başlanğıc ölçüsüdür (auto olduqda width və ya məzmun nəzərə alınır). Konteynerdə boş yer qalarsa, flex-grow onu elementlər arasında nisbətlə bölür; yer çatmazsa, flex-shrink elementləri sıxır. flex-grow: 0 olan element boş yeri götürmür, flex-shrink: 0 olan isə kiçilmir.

.item {
  flex: 1 1 200px; /* grow shrink basis */
}

flex-wrap, gap və align-content

Standart flex-wrap: nowrap bütün elementləri bir sətirdə saxlayır və lazım gələrsə sıxır. wrap ilə elementlər yeni sətirə keçir. Bir neçə sətir yarananda align-content həmin sətirlərin konteyner daxilində necə paylanacağını təyin edir; tək sətirli konteynerdə onun təsiri yoxdur. Elementlər arasındakı məsafə üçün margin əvəzinə gap yazın — kənarlarda artıq boşluq qalmır.

align-self və order

align-self yalnız bir elementin köndələn ox üzrə düzülüşünü align-items-dən fərqli edir. order elementlərin yerini HTML-i dəyişmədən vizual olaraq dəyişir (standart 0, kiçik dəyər əvvəl gəlir). Yadda saxlayın: order yalnız görünüşə təsir edir, Tab ardıcıllığı və ekran oxuyucular HTML ardıcıllığına əməl edir.

.item:nth-child(2) {
  align-self: flex-end;
  order: -1;
}

Tez-tez verilən suallar