Разгледайте разликите между тези съвременни методи за CSS оформление с практически проблем: подреждане на колони.
Когато става въпрос за CSS оформления, двата основни инструмента на ваше разположение са Grid и Flexbox. Въпреки че и двете са страхотни в създаването на оформления, те служат на различни цели и имат различни силни и слаби страни.
Научете как се държат и двата метода на оформление и кога да използвате един над друг.
Различното поведение на CSS Flexbox и Grid
За да визуализирате нещата, създайте index.html файл в предпочитаната от вас папка и поставете следното маркиране:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
И двата div съдържат същите деца, така че можете да приложите различна система към всеки и да ги сравните.
Можете също така да видите, че HTML импортира файл със стилова таблица с име style.css. Създайте този файл в същата папка като index.html и поставете следните стилове в него:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Вашата страница трябва да изглежда така:
Сега да обърна първото в гъвкава колона, просто добавете следния код към вашия стилов лист:
.flex-container {
display: flex;
}
Това е резултатът:
The гъвкав контейнер div сега разполага дъщерните си елементи в колони. Тези колони са гъвкави и отзивчиви - те адаптират ширината си въз основа на наличното пространство в прозореца за изглед. Това поведение е едно от основните основни концепции зад Flexbox.
За да предотвратите препълване на колони в гъвкав контейнер, можете да използвате гъвкава обвивка Имот:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ако няма достатъчно място за дъщерните елементи да се поберат на един ред, те сега ще се обвият и ще продължат на следващия.
Сега приложете мрежово оформление към второто използвайки този CSS:
.grid-container {
display: grid;
}
Нищо няма да се случи само с горната декларация, защото поведението по подразбиране на Grid създава редове, които се подреждат един върху друг.
За да превключите към показване на колони, трябва да промените grid-auto-flow собственост (което е ред по подразбиране):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Ето го и резултата:
За да посочите точния брой колони, които искате на всеки ред, използвайте grid-template-colons:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Тази стойност създава пет колони с еднаква ширина. За да получите поведение на обвиване, подобно на Flexbox, можете да използвате отзивчиви свойства като автоматично напасване и мин.-макс:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Често ще чуете Flexbox и Grid да се наричат съответно едноизмерни и двуизмерни. Това обаче не е цялата истина, защото и Flexbox, и Grid могат да направят a двуизмерна система за оформление. Те просто го правят по различни начини, с различни ограничения.
Най-важното е начинът, по който можете да контролирате едноизмерния аспект на оформлението. Помислете например за следното изображение:
Наблюдавайте колко последователна е колоната Grid и колко неравномерна е всяка колона във Flexbox. Всеки ред/колона във гъвкав контейнер е независим от другия. Така че някои може да са по-големи от други, в зависимост от размера на тяхното съдържание. Те са по-малко като колони и повече като независими блокове.
Мрежата работи по различен начин, като настрои 2D мрежа с колони, заключени по подразбиране. Колона с кратък текст ще бъде със същия размер като колона с много по-дълъг текст, както показва горното изображение.
В обобщение, CSS Grid е малко по-структуриран, докато Flexbox е повече гъвкава и отзивчива система за оформление. Тези алтернативни системи за оформление са добре наречени!
Кога да използвате Flexbox
Искате ли да разчитате на вътрешното оразмеряване на всяка колона/ред, както е определено от тяхното съдържание? Или искате да имате структуриран контрол от гледна точка на родителя? Ако вашият отговор е първият, тогава Flexbox е идеалното решение за вас.
За да демонстрирате това, помислете за хоризонтално навигационно меню. Заменете маркирането в рамките на тагове с това:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Заменете маркирането в CSS файла с това:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Ето резултата:
Сега трансформирайте първата навигация във гъвкаво оформление, а втората в мрежово оформление, като добавите следния CSS:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Сравнете резултатите, за да видите кой е по-подходящ:
От изображението по-горе можете да видите, че Flexbox е идеалното решение в този случай. Имате елементи, които искате да поставите един до друг и да запазите присъщия им размер (голям или малък в зависимост от дължината на текста). С мрежата всяка клетка има фиксирана ширина и не изглежда толкова добре - поне с обикновени текстови връзки.
Кога да използвате CSS Grid
Едно място, където Grid наистина превъзхожда, е когато искате да създадете твърда система от родителя. Пример е набор от елементи на карти, които трябва да са еднакво широки, дори ако съдържат различно количество съдържание.
Заменете маркирането вътре в тагове с това:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Добавете този CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Започвате с дисплей Flexbox, за да видите как изглежда, за да можете да го сравните с решетъчния дисплей. Ето изхода:
Забележете как последната колона е по-голяма от другите поради вътрешното й оразмеряване, с което Flexbox се справя добре. Но за да ги направите с еднаква ширина с помощта на Flexbox, ще трябва да се противопоставите на това присъщо оразмеряване, като добавите следното:
.columns > * {
flex: 1;
}
Това върши работа. Но Grid е по-подходящ за случаи като този. Просто посочвате броя на колоните и сте готови:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Ето резултата:
Друго предимство на използването на Grid е, че родителят контролира оформлението на децата. Така че можете да добавяте и премахвате дъщерни елементи, без да се притеснявате за нарушаване на оформлението.
Така че кога трябва да използвате Grid или Flexbox?
В обобщение, CSS Grid е страхотен, когато искате структуриран контрол от гледна точка на родителя, с еднакъв размер на колоните, независимо от размера на отделното му съдържание.
Flexbox, от друга страна, е идеален, когато искате по-гъвкава система, базирана на вътрешното оразмеряване на елементите.