Flexbox

Konteyner və onun övladları

display: flex verilmiş element flex konteynerdir; onun birbaşa övladları flex elementlər olur. flex-direction əsas oxun istiqamətini seçir. row sətir, column sütun düzülüşüdür; reverse variantları vizual sıralamanı tərsinə çevirir.

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.category { flex: 1 1 140px; }

Nümunə

Oxlar boyunca hizalanma

justify-content əsas, align-items çarpaz ox boyunca işləyir. column seçəndə əsas ox şaquli olur; bu səbəbdən adi şaquli blok axını ilə eyni imkanları vermir. Konteyner boşluğu bölüşdürə, övladları mərkəzləşdirə və hizalaya bilir.

flex-wrap yer çatmadıqda yeni sətirə keçməyə icazə verir. gap elementlər arasındakı məsafədir. flex-grow, flex-shrink və flex-basis mövcud yerin necə paylaşılmasını idarə edir. Vizual sıranı dəyişəndə klaviatura və oxu sırasının DOM-a əsaslandığını unutma: məzmunun məntiqi sırasını HTML-də düzgün saxla.

Əlavə qeydlər və mənbələr

Flex konteyner birbaşa övladlarının bir ox boyunca düzülməsini idarə edir. flex-direction əsas oxu seçir; justify-content və align-items əsas və çarpaz ox boyunca hizalanmanı qurur.

Niyə vacibdir?

CSS qaydalarını anlamaq dizaynı təsadüfi düzəlişlərlə deyil, məqsədli şəkildə qurmağa imkan verir.

Əvvəlki biliklər

HTML və semantik struktur

Bu mövzuda

Flex konteyner və flex element
Əsas və çarpaz ox
flex-direction, justify-content və align-items

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Kartları sütuna düz

Flex istiqamətini dəyiş və kartların hansı ox boyunca düzüldüyünü gör.

İstiqamət

Hizalanma

Hədəf: Kartları şaquli sütuna çevir.

.container { flex-direction: row; }
.container { align-items: flex-start; }

Özün sına

Naviqasiya və üç məhsul kartı qur. Sətir və sütun istiqamətlərinə keçərək hizalanma xassələrinin nəticəsini izah et.

Nəticəni necə yoxlayım?

Əsas və çarpaz oxu müəyyən edir, istiqaməti dəyişəndə hizalanmanın niyə dəyişdiyini izah edirsən.

Gözlənilən nəticə

Geniş ekranda üç kart yan-yana, dar sahədə növbəti sətirdə yerləşir.
Sütun istiqamətində justify-content şaquli oxu idarə edir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

flex-wrap kartların dar konteynerdə növbəti sətrə keçməsinə imkan verir. direction dəyişəndə əsas ox da dəyişir.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<nav><a href="#cards">Məhsullar</a><a href="#contact">Əlaqə</a></nav><main id="cards" class="cards"><article>Kitab</article><article>Dəftər</article><article>Qələm</article></main><footer id="contact">Əlaqə: salam@example.com</footer>
</body>
</html>

styles.css

nav,.cards{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}.cards{margin:24px 0}.cards article{padding:24px;background:#dce9f7;flex:1 1 120px}/* Sütunu yoxlamaq üçün .cards-a flex-direction:column ver. */

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.