Назария

Flexbox

Ин барои чӣ лозим аст

Унсурҳоро дар қатор гузоштан, ба канорҳо паҳн кардан, аз рӯи амуд ба марказ баробар кардан — пештар ин бо float ва ҷадвалҳо азоб буд. Flexbox («қуттиҳои чандир») чунин масъалаҳоро бо ду сатр ҳал мекунад. Сарлавҳаи сайт, қатори кортҳо, тугмаҳо дар сатр, ба марказ гузоштани ҳар чиз — ҳамаи ин flex аст.

Зарф ва унсурҳо

Flexbox дар волид фаъол мешавад:

<style>
  .row { display: flex; }
  .row div { padding: 20px; background: gold; }
</style>
<div class="row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Натиҷа: се блоки зард дар қатор, гарчанде div-ҳо одатан зери ҳамдигар меистанд.

.row — зарфи flex;
фарзандони бевоситаи он — унсурҳои flex. Наберагон ба flex вокуниш намекунанд.

Ду тир

Зарф тири асосӣ дорад — унсурҳо бо он меистанд — ва тири арзӣ, ки ба он перпендикуляр аст.

.row { flex-direction: row; }    /* тири асосӣ → аз чап ба рост (бо пешфарз) */
.col { flex-direction: column; } /* тири асосӣ ↓ аз боло ба поён */

Ин муҳим аст: хусусиятҳои баробаркунӣ нисбат ба тирҳо кор мекунанд, на «аз рӯи уфуқ»:

justify-content — бо тири асосӣ;
align-items — бо тири арзӣ.

justify-content: бо тири асосӣ

.row { display: flex; justify-content: space-between; }

Қимат	Чӣ кор мекунад
`flex-start`	ҳама дар оғоз (бо пешфарз)
`flex-end`	ҳама дар охир
`center`	дар марказ
`space-between`	якум дар оғоз, охирин дар охир, боқимонда баробар байни онҳо
`space-around`	ҷои баробар гирди ҳар кадом
`space-evenly`	ҳамаи фосилаҳо баробар, бо канорҳо якҷоя

Натиҷа бо space-between: блоки 1 дар канори чап, блоки 3 дар канори рост, блоки 2 дар мобайн.

align-items: бо тири арзӣ

.row { display: flex; align-items: center; height: 200px; }

Қимат	Чӣ кор мекунад
`stretch`	ба тамоми баландӣ кашидан (бо пешфарз)
`flex-start` / `flex-end`	ба оғоз / ба охир часпондан
`center`	дар марказ

Натиҷа: блокҳо дар мобайни баландии зарфи 200-пикселӣ меистанд.

Ба марказ гузоштани комил — чизе, ки ба веб муддати дароз намерасид:

.screen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Натиҷа: мундариҷа дақиқ дар маркази экран ҳам аз рӯи уфуқ ва ҳам аз рӯи амуд.

gap: фосилаҳо

.row { display: flex; gap: 16px; }

Натиҷа: байни унсурҳо 16px — аммо на дар канорҳо. Пештар барои ин ба ҳар унсур margin мегузоштанд ва баъд аз охирин нест мекарданд; gap соддатар аст.

flex-wrap: гузариш

Бо пешфарз унсурҳои flex фишурда мешаванд, танҳо барои он ки дар як сатр ҷо шаванд. Барои гузариши онҳо:

.cards { display: flex; flex-wrap: wrap; gap: 10px; }
.cards div { width: 200px; }

Натиҷа: кортҳо бо 200px дар қатор; онҳое, ки ҷо намешаванд, ба сатри оянда мегузаранд. Дар экрани танг як сутун мешавад, дар васеъ — чор.

Хусусиятҳои унсурҳо: flex-grow, flex-shrink, flex-basis

Ин хусусиятҳо ба фарзандон дода мешаванд:

flex-basis — андозаи «дилхоҳ» бо тири асосӣ;
flex-grow — кадом ҳиссаи ҷои холиро гирифтан (0 — калон нашудан);
flex-shrink — оё ҳангоми кам будани ҷой фишурда шудан мумкин аст (0 — мумкин нест).

.sidebar { flex: 0 0 250px; } /* калон нашудан, фишурда нашудан, 250px */
.main    { flex: 1; }          /* тамоми ҷои холиро гирифтан */

Натиҷа: сутуни канорӣ маҳз 250px, қисми асосӣ бошад ба тамоми бари боқимонда кашида мешавад.

Навишти кӯтоҳ flex: grow shrink basis. Агар ду унсур flex: 1 ва flex: 2 дошта бошанд, дуюмӣ ду баробар бештар ҷои холӣ мегирад.

Ба унсури алоҳида баробаркунии арзии худро додан мумкин: align-self: flex-end;. margin-left: auto бошад унсурро ба канори рост «тела медиҳад».

Дар дохил чӣ тавр кор мекунад

Браузер аввал унсурҳоро аз рӯи flex-basis (ё бари мундариҷа) мегузорад, баъд ҳисоб мекунад, ки чӣ қадар ҷой монд. Агар ҷой бошад — онро аз рӯи flex-grow тақсим мекунад; агар кифоя накунад — аз рӯи flex-shrink мегирад. Баъд унсурҳоро бо тири асосӣ аз рӯи justify-content ҷойгир мекунад ва дар арзӣ аз рӯи align-items баробар мекунад.

Хатоҳои маъмул

display: flex дар унсурҳо, на дар зарф. Flex дар волид фаъол мешавад.
Интизоранд, ки ба наберагон кор мекунад. Flex танҳо ба фарзандони бевосита таъсир мекунад. Қатори дохилӣ — боз як зарфи flex.
Тирҳоро омехта мекунанд. Бо flex-direction: column justify-content аз рӯи амуд кор мекунад, align-items бошад — аз рӯи уфуқ.
align-items: center «кор намекунад». Зарф баландии аз мундариҷа зиёдтар надорад — дар чӣ ба марказ гузоштан нест.
Кортҳо пахш шуданд. Бе flex-wrap: wrap унсурҳо дар як сатр фишурда мешаванд.

Ёддошт

Хусусият (дар кӣ)	Чӣ кор мекунад
`display: flex` (волид)	flexbox-ро фаъол кардан
`flex-direction: row / column`	самти тири асосӣ
`justify-content`	баробаркунӣ бо тири асосӣ
`align-items`	баробаркунӣ бо тири арзӣ
`gap: 16px`	фосилаҳо байни унсурҳо
`flex-wrap: wrap`	ба сатри нав гузарондан
`flex: 1` (фарзанд)	ҷои холиро гирифтан
`flex: 0 0 200px` (фарзанд)	андозаи собит
`align-self` (фарзанд)	баробаркунии арзии худ