Добро разумевање Флекбок-а и ЦСС Грид-а је неопходно ако желите да направите запањујуће веб-сајтове који реагују.
Ако већ дуже време пишете ЦСС, велике су шансе да сте бар чули за ове термине. Можда сте чак користили једну или оба у одређеној мери. Обоје су моћни делови ЦСС-а, са сличним, али суптилно различитим случајевима употребе.
Шта је Флекбок?
Флекбок је једнодимензионални метод ЦСС распореда који постоји већ неко време. Можете замислити Флекбок као гомилу повезаних ЦСС својстава која можете користити за поравнавање ХТМЛ елемената у контејнеру и управљање простором између њих.
Пре Флекбок-а, ова врста распореда захтевала је фрустрирајућу и незграпну употребу плутајућих и својства положаја.
Ако вас брине подршка претраживача за Флекбок, немојте. Према цаниусе.цом, сви модерни претраживачи подржавају Флекбок.
Основе Флекбок-а
Док Флекбок укључује многа ЦСС својства, основе су прилично једноставне. Коришћење Флекбок-а увек почиње тако што се родитељски контејнер декларише као флек-контејнер додавањем
дисплеј: флекс својим стилским правилима. Овим се сва деца овог елемента аутоматски претварају у флек-ставке.Након тога, можете контролисати дистрибуцију простора унутар флек-контејнера помоћу оправдати-садржај својство. Можете контролисати поравнање флек-ставки помоћу алигн-итемс имовина.
Ево примера кода који користи Флекбок да равномерно распореди простор у контејнеру између његових потомака и све их поравна у центру контејнера. Ово је ХТМЛ:
<див цласс="контејнер">
<див>1</div>
<див>2</div>
<див>3</div>
<див>4</div>
<див>5</div>
</div>Ово је ЦСС:
.контејнер {
дисплеј: флек;
ширина: 100%;
јустифи-цонтент: простор-около;
алигн-итемс: центар;
ивица: 1пк пуна црна;
висина: 200пк;
}
.контејнер > див {
висина: 100пк;
ширина: 100пк;
боја позадине: црвена;
бела боја;
фонт-сизе: 5рем;
тект-алигн: центар;
бордер-радиус: 5пк;
}
А ево и излаза:
Шта је ЦСС Грид?
ЦСС Грид је систем распореда који је комплементаран Флекбок-у. Флекбок је моћан, али није баш погодан за одређене врсте распореда. Покушај да се постави структура целе странице помоћу Флекбок-а ће на крају бити фрустрирајући задатак који укључује ружне, не-сематске ознаке и хаковани ЦСС.
ЦСС Грид није замена за Флекбок, већ алтернативни систем за неке ситуације.
Подршка за ЦСС Грид није тако обимна као за Флекбок, али Грид је разумно добро подржан у 2022.
Основе ЦСС Грида
Концепт Грид-а је једноставан. Као што име сугерише, ЦСС Грид вам омогућава да поделите простор у родитељском контејнеру у мрежу редова и колона, са било којим бројем редова/колона који желите. Након тога, одређујете позицију подређених ставки позивајући се на линије родитељске мреже.
Почните додавањем приказ: мрежа у родитељски контејнер. Затим користите грид-темплате-ровс и грид-темплате-колумнс својства да одредите редове и колоне на које желите да поделите мрежу. Затим можете користити мрежа-колона и грид-ред својства на подређеним елементима да им кажу где у мрежи треба да буду. Хајде да погледамо Грид пример који користи подешавање од пет елемената од раније, али у компликованијем аранжману.
Ево ХТМЛ-а:
<див цласс="контејнер">
<див>1</div>
<див цласс="два">2</div>
<див цласс="три">3</div>
<див цласс="четири">4</div>
<див цласс="пет">5</div>
</div>Ево ЦСС-а:
.контејнер {
приказ: мрежа;
ширина: 100%;
грид-темплате-ровс: репеат (3, 1фр);
грид-темплате-цолумнс: поновити (3, 1фр);
јаз: 0.5рем;
ивица: 1пк пуна црна;
висина: 300пк;
}.контејнер > див {
боја позадине: црвена;
бела боја;
фонт-сизе: 5рем;
тект-алигн: центар;
бордер-радиус: 5пк;
}
.контејнер &гт; .два {
грид-ред: 2;
грид-колона: 2;
}
Ево излаза:
ЦСС Грид такође укључује добар део друга својства која можете користити за прављење сложенијих распореда.
Коју би требало да користите?
Прво, важно је напоменути да вас ништа не спречава да користите Флекбок и Грид заједно и, у неким случајевима, то је оптималан избор. Уз то, хајде да одговоримо на питање које распореде је сваки од ових система најпогоднији за имплементацију.
Флекбок је најпогоднији за изградњу распореда који укључују поравнавање и дистрибуцију елемената на једној линији. Примери ове врсте распореда су поравнавање икона на крају одељка или сређивање веза у траци за навигацију.
Мрежа, с друге стране, најсјајније сија када морате прецизно да позиционирате елементе у односу на друге (и хоризонтално и вертикално), а ово позиционирање вам је потребно да бисте се лако прилагодили различитим величинама екрана.
Да бисте демонстрирали, ево кода који бисте морали да напишете да бисте поново креирали распоред из примера Грид са Флекбок-ом.
ХТМЛ:
<див цласс="контејнер">
<див цласс="суб оне">
<див>1</div>
<див>5</div>
</div><див цласс="суб тво">
<див>2</div>
</div>
<див цласс="суб тхрее">
<див>4</div>
<див>3</div>
</div>
</div>
ЦСС:
.контејнер {
ивица: 1пк пуна црна;
висина: 300пк;
}.суб {
дисплеј: флек;
ширина: 100%;
}.један, .три {
оправдати-садржај: простор-између
}.два {
јустифи-цонтент: центар;
}
.суб > див {
висина: 100пк;
ширина: 100пк;
боја позадине: црвена;
бела боја;
фонт-сизе: 5рем;
тект-алигн: центар;
бордер-радиус: 5пк;
}
А ево и излаза:
Главна ствар коју треба приметити је да иако овај код производи исти излаз као Грид пример, маркирање је овде знатно компликованије. Имплементација овог распореда захтева подконтејнере и морате да поставите нумерисане дивове ван реда у ознаке.
Штавише, претпоставите да сте морали да померите овај распоред у незгодну позицију: рецимо да поравнате 5. див са 2. Да сте користили Флекбок за ово, морали бисте да прибегнете положај: релативан или нешто слично. Користећи Грид, све што требате је да померите мрежа-колона имовина.
Али, насупрот томе, имплементација једноставног поравнања једне линије из Флекбок примера са Грид-ом би резултирала много више ЦСС-а. Мрежа је очигледно мање погодна за такву врсту распореда.
Док Флекбок и Грид углавном могу да реплицирају једни друге ефекте, постоје неки изузеци. Преклапање елемената је прилично тешко само са Флекбок-ом, али је врло лако са Грид-ом. Мрежа такође не дозвољава елементима да се одгурну од других елемената са маргином: аутоматски као што то чини Флекбок.
Флекбок и Грид су моћни системи распореда
Флекбок и ЦСС Грид су системи дизајна који олакшавају постављање садржаја ваше веб странице. Мрежа је најбоља за дводимензионалне распореде са много елемената који морају бити прецизно позиционирани један у односу на други. Флекбок је бољи за једнодимензионалне или једнолинијске распореде где само треба да размакнете гомилу елемената на одређени начин.
