Flexbox
Flexbox elementləri bir ox boyunca düzmək üçündür. Valideynə display: flex; verilir, uşaqlar flex elementi olur. flex-direction əsas oxu təyin edir: row (standart, soldan sağa), column, row-reverse, column-reverse. flex-wrap standart olaraq nowrap-dır; wrap elementlərin növbəti sətrə keçməsinə imkan verir.
justify-content əsas ox üzrə düzür: flex-start, center, flex-end, space-between, space-around, space-evenly. align-items çarpaz ox üzrə düzür (standart stretch). gap elementlər arası məsafədir. Uşaqda flex: 1 qalan boş yeri bərabər bölüşdürür, align-self tək elementi fərqli düzür, order sıranı dəyişir.
CSS Grid
Grid iki ölçülü (sətir və sütun) düzülüş üçündür. Valideynə display: grid; verilir. grid-template-columns: repeat(3, 1fr); üç bərabər sütun yaradır. fr (fraction) boş yerin payıdır: 1fr 2fr 1fr olduqda ortadakı sütun yarısını tutur. gap sətir və sütun arası boşluqdur.
Element grid-column: 1 / 3; ilə 1-ci xəttdən 3-cü xəttədək (yəni iki sütun) uzanır; span 2 ilə də eyni nəticə əldə edilir. grid-template-areas adlandırılmış sahələrlə maket qurur. repeat(auto-fit, minmax(200px, 1fr)) responsiv kart şəbəkəsi üçün tipikdir.
Nə zaman hansı
Flexbox bir istiqamətli düzülüş (naviqasiya, düymə sırası, kart daxilində) üçün, Grid isə bütün səhifə maketi və şəbəkə üçün əlverişlidir. İkisi birlikdə işlədilə bilər.