Доброто разбиране на Flexbox и CSS Grid е необходимо, ако искате да изградите зашеметяващи, отзивчиви уебсайтове.
Ако сте писали CSS от известно време, има голяма вероятност да сте чували поне за тези термини. Може дори да сте използвали едното или и двете до известна степен. И двете са мощни части на CSS, с подобни, но едва доловимо различни случаи на употреба.
Какво е Flexbox?
Flexbox е метод за едноизмерно CSS оформление, който съществува от известно време. Можете да мислите за Flexbox като за куп свързани CSS свойства, които можете да използвате за подравняване на HTML елементи в контейнер и управление на пространството между тях.
Преди Flexbox този тип оформление изискваше разочароващо и тромаво използване на float и свойства на позицията.
Ако се притеснявате относно поддръжката на браузъра за Flexbox, не се притеснявайте. Според caniuse.com, всички съвременни браузъри поддържат Flexbox.
Основите на Flexbox
Докато Flexbox включва много CSS свойства, основите са доста прости. Използването на Flexbox винаги започва с деклариране на родителски контейнер като гъвкав контейнер чрез добавяне
дисплей: гъвкав към своите стилови правила. Правейки това автоматично прави всички деца на този елемент гъвкави елементи.След това можете да контролирате разпределението на пространството във гъвкавия контейнер с помощта на свойство justify-content. Можете да контролирате подравняването на flex-items с подравняване на елементи Имот.
Ето пример за код, който използва Flexbox, за да разпредели равномерно пространството в контейнер между неговите деца и да ги подравни в центъра на контейнера. Това е HTML:
<div клас="контейнер">
<див>1</div>
<див>2</div>
<див>3</div>
<див>4</div>
<див>5</div>
</div>Това е CSS:
.контейнер {
дисплей: гъвкав;
ширина: 100%;
justify-content: space-around;
подравняване на елементи: център;
рамка: 1px плътно черно;
височина: 200px;
}
.контейнер > div {
височина: 100px;
ширина: 100px;
цвят на фона: червен;
цвят: бял;
размер на шрифта: 5 rem;
подравняване на текст: център;
радиус на границата: 5px;
}
И ето изхода:
Какво е CSS Grid?
CSS Grid е система за оформление, която допълва Flexbox. Flexbox е мощен, но не е много подходящ за определени типове оформления. Опитът да се очертае структурата на цяла страница с Flexbox в крайна сметка ще се окаже разочароваща задача, включваща грозно, несематично маркиране и хакнат CSS.
CSS Grid не е заместител на Flexbox, а по-скоро алтернативна система за някои ситуации.
Поддръжката за CSS Grid не е толкова широка, колкото за Flexbox, но Grid е сравнително добре поддържан през 2022 г.
Основите на CSS Grid
Концепцията на Grid е проста. Както подсказва името, CSS Grid ви позволява да разделите пространството в родителски контейнер на мрежа от редове и колони с произволен брой редове/колони, които желаете. След това указвате позицията на дъщерните елементи, като се позовавате на линиите на родителската мрежа.
Започнете с добавяне дисплей: решетка към родителския контейнер. След това използвайте grid-template-rows и grid-template-colons свойства, за да посочите редовете и колоните, на които искате да разделите мрежата. След това можете да използвате решетка-колона и решетка-ред свойства на дъщерните елементи, за да им каже къде в мрежата трябва да бъдат. Нека да разгледаме пример за Grid, който използва настройката от пет елемента от преди, но в по-сложна подредба.
Ето HTML:
<div клас="контейнер">
<див>1</div>
<div клас="две">2</div>
<div клас="три">3</div>
<div клас="четири">4</div>
<div клас="пет">5</div>
</div>Ето CSS:
.контейнер {
дисплей: решетка;
ширина: 100%;
grid-template-rows: повторение (3, 1fr);
grid-template-colons: повторение (3, 1fr);
празнина: 0.5rem;
рамка: 1px плътно черно;
височина: 300px;
}.контейнер > div {
цвят на фона: червен;
цвят: бял;
размер на шрифта: 5 rem;
подравняване на текст: център;
радиус на границата: 5px;
}
.контейнер > .две {
решетка-ред: 2;
решетка-колона: 2;
}
Ето изхода:
CSS Grid също включва много други свойства, които можете да използвате за изграждане на по-сложни оформления.
Кой трябва да използвате?
Първо, важно е да се отбележи, че нищо не ви спира да използвате Flexbox и Grid заедно и в някои случаи това е оптималният избор. Въпреки това, нека отговорим на въпроса кои оформления всяка от тези системи е най-подходяща за прилагане.
Flexbox е най-подходящ за изграждане на оформления, които включват подравняване и разпределяне на елементи на един ред. Примери за този вид оформление са подравняване на икони в края на раздел или подреждане на връзките в лента за навигация.
Решетката, от друга страна, блести най-ярко, когато трябва да позиционирате прецизно елементи спрямо другите (както хоризонтално, така и вертикално) и имате нужда от това позициониране, за да се адаптирате лесно към различни размери на екрана.
За да демонстрирате, ето кода, който ще трябва да напишете, за да пресъздадете оформлението от примера Grid с Flexbox.
HTML:
<div клас="контейнер">
<div клас="под едно">
<див>1</div>
<див>5</div>
</div><div клас="под две">
<див>2</div>
</div>
<div клас="под три">
<див>4</div>
<див>3</div>
</div>
</div>
CSS:
.контейнер {
рамка: 1px плътно черно;
височина: 300px;
}.под {
дисплей: гъвкав;
ширина: 100%;
}.един, .три {
justify-content: интервал между
}.две {
justify-content: център;
}
.под > div {
височина: 100px;
ширина: 100px;
цвят на фона: червен;
цвят: бял;
размер на шрифта: 5 rem;
подравняване на текст: център;
радиус на границата: 5px;
}
И ето изхода:
Основното нещо, което трябва да се отбележи тук е, че докато този код произвежда същия резултат като примера с мрежата, маркирането тук е значително по-сложно. Внедряването на това оформление изисква подконтейнери и трябва да поставите номерираните divs не по ред в маркирането.
Освен това приемете, че трябва да преместите това оформление в неудобна позиция: да речем, подравняване на 5-ия div с 2-ри. Ако сте използвали Flexbox за това, ще трябва да прибегнете до позиция: относителна или нещо подобно. Използвайки Grid, всичко, от което се нуждаете, е да преместите решетка-колона Имот.
Но, за разлика от това, прилагането на простото подравняване на един ред от примера на Flexbox с Grid би довело до много повече CSS. Мрежата очевидно е по-малко подходяща за такъв тип оформление.
Въпреки че Flexbox и Grid могат да възпроизвеждат взаимно ефектите си, има някои изключения. Припокриването на елементи е доста трудно само с Flexbox, но е много лесно с Grid. Мрежата също така не позволява на елементите да се отдалечават от други елементи с марж: автоматично, както прави Flexbox.
Flexbox и Grid са мощни системи за оформление
Flexbox и CSS Grid са системи за дизайн, които правят оформлението на съдържанието на вашата уеб страница лесно. Мрежата е най-добра за двуизмерни оформления с много елементи, които трябва да бъдат прецизно позиционирани един спрямо друг. Flexbox е по-добър за едноизмерни или едноредови оформления, където просто трябва да разположите куп елементи по определен начин.
