Flexbox срещу Grid - Как да изградим най-често срещаните HTML оформления

Има толкова много страхотни CSS ресурси в целия интернет. Но какво, ако просто искате просто оформление и го искате СЕГА?

В тази статия описвам 5-те най-често срещани оформления на уеб страници и как да ги изградя, използвайки както Flexbox, така и Grid.

Как ще работи това

Има връзка под всяко оформление за пълния HTML и CSS код на CodePen.

Имайте предвид, че използвам SASS за съставяне на дефиниции на стилове, така че ако искате да направите същото на вашия локален, инсталирайте SASS, като използвате:

npm i sass -g 

Основен шаблон за карта

Използвах горната карта като основа на оформлението на уеб страницата. Състои се от три елемента във вертикална посока, така че нормалните divблокове биха работили добре. По-късно обаче ще трябва да направя разтягането на средния елемент - текстовия абзац.

Тук както Flexbox, така и Grid вършат работата безпроблемно. Предпочитам Flexbox, тъй като за мен е по-лесен.

Победител: Flexbox

CodePen Flexbox, CodePen Grid

Сега нека започнем да създаваме нашите различни оформления.

# 1 Вертикално и хоризонтално центрирана карта

С Flexbox се нуждаем от един елемент, който се центрира хоризонтално, и друг (дъщерния елемент), който се центрира вертикално.

Редът на артикулите се определя от flex-direction. Как елементът се позиционира в наличното пространство, се задава от align-selfелемента или align-itemsвърху неговия родител.

С мрежата се нуждаем от три колони и три реда. След това позиционираме картата в средната клетка.

Хоризонталното центриране е лесно. Определяме три колони и техните размери, като използваме, grid-template-columns: auto 33% autoтъй като картата трябва да бъде толкова широка, колкото 1/3 от видимата област.

Проблемът е, че не знаем вертикалните размери. Искаме горният и долният ред да заемат оставащото пространство, което не е възможно с мрежата. Картата е центрирана, но нейната височина зависи от височината на прозореца.

Можем обаче да разрешим това с допълнителен опаковъчен елемент около картата и да я центрираме с помощта margin.

Победител: Flexbox

CodePen Flexbox, CodePen Grid

# 2 Две карти вертикално и хоризонтално центрирани

Често трябва да центрираме повече от един елемент. Тези две карти също трябва да поддържат еднаква височина, ако едната или другата съдържа по-дълъг текст.

С Flexbox трябва да обвием двете карти в друг елемент и да го използваме за центриране на двете карти наведнъж.

Тук не можем да използваме align-items, тъй като това се отнася за оста Y в този случай. Трябва да определим как оставащото пространство на X-ос трябва да бъде разпределен с justify-content: center. Това гарантира, че и двете карти са хоризонтално центрирани.

Ако пропуснем проблема с променливата височина на Grid, можем да постигнем същия резултат дори без никакви допълнителни обвиващи елементи. Този път дефинираме мрежа с пет колони с grid-template-columns: auto 33% 50px 33% auto. Останалото остава същото като в предишния пример.

Победител: Flexbox

CodePen Flexbox, CodePen Grid

# 3 Множество карти с еднаква ширина и височина

Това е друг типичен случай на използване на блогове, сайтове за електронна търговия или като цяло всеки сайт, който показва някакъв списък. Искаме картите да имат еднаква ширина и височина. Височината трябва да се изведе от най-големия елемент в списъка.

Това може да стане във Flexboxизползване flex-wrap: wrap. Елементите ще се пренасочат към следващия ред, ако тяхната ширина надвишава оставащото пространство на всеки ред. Същата височина обаче се запазва само в обхвата на един ред, освен ако не го дефинирате изрично.

Решеткапоказва истинската си сила тук. Това оформление може да бъде създадено с помощта, grid-auto-rows: 1frкоято налага една и съща височина на всички редове.

Победител: Решетка

CodePen Flexbox, CodePen Grid

# 4 Редуване на текст и изображения вертикално и хоризонтално центрирано

В този пример имаме текст с бутони CTA, придружен от изображение от другата страна. И двата компонента трябва да бъдат вертикално центрирани, тъй като размерът им може да варира.

Това е парче торта за Flexbox. Всеки ред е articleелемент, разделен на два опаковъчни контейнера .imgи .content. Те са необходими за равномерно разпределение на размера ( flex-basis: 50%).

Вертикалното центриране на вътрешното съдържание се определя от align-items: center.

Редуването се постига чрез обръщане на посоката на Flexbox flex-direction: row-reverseпри всяка странна статия.

Решеткасе справя добре и с този случай на употреба. Не е нужно да дефинираме една гигантска мрежа, а по-скоро една за всяка article.

Той определя еднакво широки колони, които са вертикално центрирани с помощта align-items: center.

Редуването се определя на ниво клетка чрез превключени стойности за grid-column.

Победител: равенство

CodePen Flexbox, CodePen Grid

# 5 Хоризонтален хедър с меню

За да се постигне този дизайн с помощта на Flexbox, двете страни на заглавката трябва да бъдат представени с един елемент.

Логото и името на компанията образуват едно anchorотляво, а менюто е един navелемент отдясно. Flexbox ги позиционира с justify-content: space-between.

С Grid ни трябват две колони - едната за логото, а другата за менюто. Менюто е друга мрежа, която разпределя размера на колоните равномерно, използвайки grid-template-columns: repeat(4, minmax(0, 1fr)).

Проблемът тук е, че ако искаме да добавим още един елемент в менюто, трябва да настроим и CSS.

Победител: Flexbox

CodePen Flexbox, CodePen Grid

И победителят е...

Крайният резултат е 5: 2 в полза на Flexbox, но това не означава, че той става краен победител в CSS. Има ситуации, когато трябва да използвате едното или другото, понякога дори и двете заедно, за да постигнете това, от което се нуждаете.

Ако имате нужда от гъвкаво и условно позициониране, използвайте Flexbox. Ако искате да създадете списъци или подобни структури, които изискват еднакво големи елементи или имат таблична форма, използвайте Grid.

Като разработчик отпред, няма да се измъкнете, ако не знаете и двете.

Справочник Flexbox, Справочник Grid

PS Ако съм пропуснал оформление, което използвате ежедневно, уведомете ме в Twitter и ще подготвя продължение :-)