- Flex-konteyner yaratmaq və əsas və köndələn oxları izah etmək
justify-content,align-itemsvəgapilə elementləri düzləndirmək- Elementi hər iki istiqamətdə mərkəzə gətirmək
flex,flex-wrapvəmargin-left: autoilə çevik menyular və kart sıraları qurmaq
Demək olar ki, hər saytın yuxarısında eyni mənzərəni görürsən: solda loqo, sağda menyu, hamısı eyni xətt üzərində və şaquli mərkəzdə. Uzun illər ərzində bir elementi şaquli mərkəzə gətirmək veb-tərtibatçıların məşhur baş ağrısı idi. Flexbox bunu bir neçə sətirlə həll edir.
Flex-konteyner və oxlar
Valideyn elementə display: flex yazanda o, flex-konteynerə, onun birbaşa uşaqları isə flex-elementlərə çevrilir. Elementlər əsas ox boyunca düzülür: adi halda bu, soldan sağa üfüqi xəttdir (flex-direction: row). Ona perpendikulyar olan ox köndələn ox adlanır. flex-direction: column yazsan, oxlar yer dəyişir: elementlər yuxarıdan aşağı düzülür.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
.box { padding: 8px; margin-bottom: 12px; background: #f1f5f9; border-radius: 8px; }
.flex { display: flex; gap: 8px; }
.item { padding: 10px 16px; background: #818cf8; color: white; border-radius: 6px; }
</style>
<p>Without flex: blocks stack.</p>
<div class="box">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
<p>With display: flex: one row.</p>
<div class="box flex">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>.flex qaydasına flex-direction: column; əlavə et — elementlər yenidən alt-alta düzüləcək, amma aralarındakı gap qalacaq.Düzləndirmə: `justify-content` və `align-items`
justify-content elementləri əsas ox boyunca yerləşdirir və boş yeri paylayır. align-items isə onları köndələn ox üzrə düzləndirir. Hər iki xassə konteynerə yazılır, elementlərə yox.
<style>
body { font-family: system-ui, sans-serif; padding: 8px; font-size: 13px; }
.row { display: flex; margin: 2px 0 8px; background: #f1f5f9; border-radius: 6px; }
.row div { width: 40px; margin: 3px; padding: 4px 0; text-align: center;
background: #34d399; border-radius: 4px; }
.start { justify-content: flex-start; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.between { justify-content: space-between; }
.evenly { justify-content: space-evenly; }
</style>
<code>flex-start</code><div class="row start"><div>1</div><div>2</div><div>3</div></div>
<code>center</code><div class="row center"><div>1</div><div>2</div><div>3</div></div>
<code>flex-end</code><div class="row end"><div>1</div><div>2</div><div>3</div></div>
<code>space-between</code><div class="row between"><div>1</div><div>2</div><div>3</div></div>
<code>space-evenly</code><div class="row evenly"><div>1</div><div>2</div><div>3</div></div>space-between kənar elementləri kənarlara sıxır, space-evenly isə bütün boşluqları bərabər edir. Bir .row-a space-around yaz və fərqi tap.| Xassə | Qiymətlər | Nə edir |
|---|---|---|
flex-direction | row, column | əsas oxun istiqaməti |
justify-content | flex-start, center, space-between… | əsas ox boyunca yerləşdirmə |
align-items | stretch, center, flex-start, flex-end | köndələn ox üzrə düzləndirmə (adi halda stretch — dartılma) |
flex-wrap | nowrap, wrap | yer çatmayanda yeni sətrə keçmək |
gap | 8px, 1rem… | elementlər arasındakı məsafə |
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
.stage {
display: flex;
justify-content: center;
align-items: center;
height: 180px;
background: linear-gradient(135deg, #a5b4fc, #f9a8d4);
border-radius: 12px;
}
.badge { padding: 14px 22px; background: white; border-radius: 10px; font-weight: 700; }
</style>
<div class="stage">
<div class="badge">Perfectly centered 🎯</div>
</div>align-items-i flex-end, sonra flex-start et. linear-gradient isə iki rəng arasında hamar keçid yaradan fondur.Çevik ölçülər: `flex` və `flex-wrap`
Flexbox-un adındakı «flex» (çevik) sözü elementlərin boş yerə görə böyüyüb-kiçilə bilməsi deməkdir. Bunu elementə yazılan flex xassəsi idarə edir. flex: 1 elementə «qalan bütün boş yeri tut» deyir. Bir neçə elementin hamısında flex: 1 olsa, boş yeri bərabər bölürlər. Tam yazılış flex: 1 1 140px isə üç qiymətdən ibarətdir: böyümə (flex-grow), kiçilmə (flex-shrink) və başlanğıc ölçü (flex-basis).
<style>
body { font-family: system-ui, sans-serif; margin: 0; }
nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #1e293b; }
nav a { color: #e2e8f0; text-decoration: none; }
.logo { font-weight: 800; color: #fbbf24; }
.login { margin-left: auto; padding: 6px 14px; background: #fbbf24; color: #1e293b; border-radius: 6px; }
.page { display: flex; gap: 12px; padding: 12px; }
.side { width: 110px; padding: 10px; background: #e0e7ff; border-radius: 8px; }
.content { flex: 1; padding: 10px; background: #f1f5f9; border-radius: 8px; }
</style>
<nav>
<span class="logo">MySite</span>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#" class="login">Log in</a>
</nav>
<div class="page">
<aside class="side">Side menu: 110px</aside>
<main class="content">flex: 1 takes all the space that is left.</main>
</div>.login sağa sıxılıb, çünki margin-left: auto bütün boş yeri onun solunda toplayır. .side-a da flex: 1 yaz — iki sütun bərabərləşəcək.Adi halda flex-elementlər bir sətirdə qalır və lazım gələndə sıxılır. flex-wrap: wrap isə onlara yer çatmayanda yeni sətrə keçməyə icazə verir. flex: 1 1 140px ilə birlikdə bu, telefonda da, geniş ekranda da gözəl görünən kart sırası yaradır.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; background: #f8fafc; }
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card { flex: 1 1 140px; padding: 12px; text-align: center;
background: white; border: 1px solid #e2e8f0; border-radius: 10px; }
.card span { font-size: 32px; }
.card p { margin: 6px 0 0; }
</style>
<div class="cards">
<div class="card"><span>🍎</span><p>Apples</p></div>
<div class="card"><span>🍐</span><p>Pears</p></div>
<div class="card"><span>🍇</span><p>Grapes</p></div>
<div class="card"><span>🍑</span><p>Peaches</p></div>
<div class="card"><span>🍋</span><p>Lemons</p></div>
</div>140px-i 250px et — kartlar daha az sığacaq və yeni sətrə keçəcək. Sonra flex-wrap: wrap-ı sil və kartların necə sıxıldığına bax.Əsas fikirlər
display: flexkonteyneri flex-konteynerə, birbaşa uşaqları isə flex-elementlərə çevirir.flex-directionəsas oxu seçir:row— üfüqi,column— şaquli.justify-contentəsas ox,align-itemsköndələn ox üzrə düzləndirir;gapelementlər arasında boşluq qoyur.flex: 1elementə qalan boş yeri tutdurur;flex-wrap: wrapelementləri yeni sətrə keçirir.- Mərkəzləşdirmə:
justify-content: center+align-items: center; elementi sona itələmək:margin-left: auto.
Özünü yoxla
10 sual. Hər düzgün cavab XP qazandırır.