CSS Grid կամ Flexbox. Ո՞րն է ավելի լավ սյունակներ ստեղծելու համար:
Բացահայտեք CSS դասավորության այս ժամանակակից մեթոդների միջև եղած տարբերությունները գործնական խնդիրով՝ սյունակների շարում:
Երբ խոսքը վերաբերում է CSS դասավորությանը, ձեր տրամադրության տակ գտնվող երկու հիմնական գործիքներն են Grid-ը և Flexbox-ը: Թեև երկուսն էլ հիանալի են դասավորությունների ստեղծման մեջ, նրանք ծառայում են տարբեր նպատակների և ունեն տարբեր ուժեղ և թույլ կողմեր:
Իմացեք, թե ինչպես են վարվում դասավորության երկու մեթոդները և երբ օգտագործել մեկը մյուսի վրա:
CSS Flexbox-ի և Grid-ի տարբեր վարքագիծը
Իրերը պատկերացնելու համար ստեղծեք index.html ֆայլ ձեր նախընտրած թղթապանակում և տեղադրեք հետևյալ նշագրում.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox vs Grid</h1>
<h2>Flexbox:</h2>
<div class="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>
<div class="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: 2px solid black;
padding: 0.5em;
}
Ձեր էջը պետք է այսպիսի տեսք ունենա.
Այժմ, առաջին <div>-ը ճկուն սյունակի վերածելու համար պարզապես ձեր ոճաթերթում ավելացրեք հետևյալ կոդը.
.flex-container {
display: flex;
}
Սա արդյունքն է.
flex-container div-ն այժմ իր զավակ տարրերը դնում է սյունակներում: Այս սյունակները ճկուն են և արձագանքող՝ դրանք հարմարեցնում են իրենց լայնությունը՝ հիմնվելով տեսադաշտում առկա տարածության վրա: Այս վարքագիծը Flexbox-ի հիմնական հիմնական հասկացություններից մեկն է:
flex-container-ում սյունակների վարարումը կանխելու համար կարող եք օգտագործել flex-wrap հատկությունը.
.flex-container {
display: flex;
flex-wrap: wrap;
}
Եթե երեխայի տարրերը բավարար տեղ չկա մեկ տողի վրա տեղավորվելու համար, ապա դրանք այժմ կփաթաթվեն և կշարունակեն հաջորդը:
Այժմ կիրառեք Grid դասավորությունը երկրորդ <div>-ի վրա՝ օգտագործելով այս CSS-ը.
.grid-container {
display: grid;
}
Միայն վերը նշված հայտարարությամբ ոչինչ չի պատահի, քանի որ Grid-ի լռելյայն վարքագիծը ստեղծում է տողեր, որոնք կուտակվում են միմյանց վրա:
Սյունակի ցուցադրմանը անցնելու համար դուք պետք է փոխեք grid-auto-flow հատկությունը (որը լռելյայն տող է):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Այժմ ահա արդյունքը.
Յուրաքանչյուր տողում ձեր ուզած սյունակների ճշգրիտ թիվը նշելու համար օգտագործեք grid-template-columns:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Այս արժեքը ստեղծում է հինգ հավասար լայնությամբ սյունակ: Flexbox-ի նման փաթաթման վարքագիծ ստանալու համար կարող եք օգտագործել արձագանքող հատկություններ, ինչպիսիք են ավտոմատ տեղավորումը և min-max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Դուք հաճախ կլսեք Flexbox-ը և Grid-ը, որոնք համապատասխանաբար կոչվում են միաչափ և երկչափ: Այնուամենայնիվ, դա ամբողջ ճշմարտությունը չէ, քանի որ և՛ Flexbox-ը, և՛ Grid-ը կարող են ստեղծել երկչափ դասավորության համակարգ: Նրանք պարզապես դա անում են տարբեր ձևերով, տարբեր սահմանափակումներով:
Ամենակարևորն այն միջոցն է, որով դուք կարող եք վերահսկել դասավորության միաչափ կողմը: Դիտարկենք հետևյալ պատկերը, օրինակ.
Դիտեք, թե որքանով է համահունչ Grid սյունակը և որքան անհավասար է Flexbox-ի յուրաքանչյուր սյունակ: Flex կոնտեյների յուրաքանչյուր տող/սյունակ անկախ է մյուսից: Այսպիսով, ոմանք կարող են ավելի մեծ լինել, քան մյուսները՝ կախված դրանց բովանդակության չափից: Սրանք ավելի քիչ նման են սյուների և ավելի շատ նման են անկախ բլոկների:
Ցանցն այլ կերպ է աշխատում՝ ստեղծելով 2D ցանց՝ լռելյայնորեն կողպված սյունակներով: Կարճ տեքստով սյունակը կունենա նույն չափը, ինչ շատ ավելի երկար տեքստով, ինչպես ցույց է տալիս վերը նշված պատկերը:
Ամփոփելով, CSS Grid-ը մի փոքր ավելի կառուցվածքային է, մինչդեռ Flexbox-ը դասավորության ավելի ճկուն և պատասխանատու համակարգ է: Այս այլընտրանքային դասավորության համակարգերը լավ անվանում են:
Երբ օգտագործել Flexbox-ը
Ցանկանու՞մ եք հիմնվել յուրաքանչյուր սյունակի/տողի ներքին չափերի վրա, ինչպես սահմանված է դրանց բովանդակությամբ: Կամ ուզում եք ունենալ կառուցվածքային վերահսկողություն ծնողի տեսանկյունից: Եթե ձեր պատասխանն առաջինն է, ապա Flexbox-ը ձեզ համար կատարյալ լուծում է:
Դա ցույց տալու համար դիտարկեք հորիզոնական նավիգացիոն մենյու: Փոխարինեք նշագրումը <body> թեգերի մեջ հետևյալով.
<h1>Flexbox vs. Grid</h1>
<header class="flex">
<h2>Flexbox</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<header class="grid">
<h2>Grid</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
Փոխարինեք CSS ֆայլի նշումը հետևյալով.
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solid black;
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-ը այս դեպքում կատարյալ լուծումն է: Դուք ունեք տարրեր, որոնք ցանկանում եք գնալ միմյանց կողքին և պահպանել իրենց ներքին չափերը (մեծ կամ փոքր՝ կախված տեքստի երկարությունից): Grid-ի հետ յուրաքանչյուր բջիջ ունի ֆիքսված լայնություն, և այն այնքան էլ լավ տեսք չունի՝ առնվազն պարզ տեքստային հղումներով:
Երբ օգտագործել CSS Grid-ը
Մի տեղ, որտեղ Grid-ը իսկապես գերազանցում է, այն է, երբ դուք ցանկանում եք ստեղծել կոշտ համակարգ ծնողից: Օրինակ՝ քարտի տարրերի հավաքածուն է, որը պետք է հավասարապես լայն լինի, նույնիսկ եթե դրանք պարունակեն տարբեր քանակությամբ բովանդակություն:
Փոխարինեք <body> թեգերի ներսում նշագրումը հետևյալով.
<h1>Flexbox vs. Grids</h1>
<section class="cards">
<h2>Some cards</h2>
<div class="columns">
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">A Longer Title Than Others</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</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-ը, մյուս կողմից, իդեալական է, երբ ցանկանում եք ավելի ճկուն համակարգ ունենալ՝ հիմնված տարրերի ներքին չափերի վրա: