CSS Grid и Flexbox: два начина да подредим интерфейс

Полезно е да знаеш

Подреждането на една страница включва повече от поставяне на блокове един след друг. Трябва да се реши как те споделят пространство, как се подравняват и какво се случва при промяна на ширината. CSS предлага различни модели за тези задачи. В документацията на MDN Grid е представен като двумерен подход, а Flexbox като модел за една основна посока. [1] Това разграничение е полезно при избора, защото насочва вниманието към отношенията между елементите, вместо към случайна любима технология.

Flexbox разглежда основна и напречна ос. Основната посока може да бъде ред или колона и се определя от flex-direction; напречната е перпендикулярна на нея. [2] Затова „едномерно“ не означава само хоризонтално. То означава, че моделът решава разпределението в една посока наведнъж. За група бутони или кратък навигационен ред това често е естествено описание на задачата: елементите трябва да споделят наличното място и да се подравнят спрямо общата си посока.

Grid е предназначен за отношения по редове и колони едновременно. MDN подчертава, че той е част от цялостната система за оформление и може да работи с други подходи. [1] При каталог например може да е нужно картите да следват обща колонна структура, а вътре във всяка карта бутоните да се подреждат по друг начин. Това не е конфликт. Външната решетка и вътрешната група решават различни пространствени задачи и могат да използват различни инструменти.

При Flexbox елементите могат да бъдат прехвърляни на нови редове чрез flex-wrap. Подравняването и разпределението на свободното пространство са сред основните възможности на модела. [2] Важно е обаче да не се заключава, че появата на втори ред автоматично го превръща в същия модел като Grid. За да изберем, трябва да уточним дали отделните редове трябва да споделят обща колонна логика, или всяка последователност може да бъде подредена според собствените си елементи и налично място.

Да си представим страница с дванадесет карти и лента от три филтъра. При картите може да е съществено всяка колона да има последователна ширина. При филтрите по-важно може да е надписите да получават достатъчно място и при нужда да преминават надолу. Това е проектен пример, който показва защо изборът трябва да следва структурата. Ако първо се формулира визуалното правило, настройването на CSS става по-разбираемо от поредица опити с произволни стойности до привидно добър резултат.

Проверката трябва да включва къси и дълги текстове, повече елементи и различни ширини. Една подредба може да изглежда добре с примерни надписи и да се наруши с действителното съдържание. Полезно е да се наблюдава кое отношение се губи: колоните, разстоянието, подравняването или четимостта. Grid и Flexbox дават различни средства за контрол, но нито едно не замества ясната идея за интерфейса. Работещото оформление е това, което запазва необходимите връзки, когато съдържанието и екранът се променят.