Εξερευνήστε τις διαφορές μεταξύ αυτών των σύγχρονων μεθόδων διάταξης 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.





instagram viewer

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 εισάγει ένα αρχείο φύλλου στυλ με όνομα στυλ.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;
}

Αυτό είναι το αποτέλεσμα:

ο flex-container Το div τώρα εκθέτει τα θυγατρικά του στοιχεία σε στήλες. Αυτές οι στήλες είναι ευέλικτες και αποκρίνονται—προσαρμόζουν το πλάτος τους με βάση τον διαθέσιμο χώρο στη θύρα προβολής. Αυτή η συμπεριφορά είναι μια από τις κύριες βασικές έννοιες πίσω από το Flexbox.

Για να αποτρέψετε την υπερχείλιση στηλών στο flex-container, μπορείτε να χρησιμοποιήσετε το flex-wrap ιδιοκτησία:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Εάν δεν υπάρχει αρκετός χώρος για να χωρέσουν τα θυγατρικά στοιχεία στη μία γραμμή, θα τυλιχτούν τώρα και θα συνεχίσουν στην επόμενη.

Τώρα εφαρμόστε μια διάταξη πλέγματος στο δεύτερο χρησιμοποιώντας αυτό το CSS:

.grid-container {
display: grid;
}

Τίποτα δεν θα συμβεί μόνο με την παραπάνω δήλωση επειδή η προεπιλεγμένη συμπεριφορά του Grid δημιουργεί σειρές που στοιβάζονται η μία πάνω στην άλλη.

Για να μεταβείτε σε εμφάνιση στήλης, πρέπει να αλλάξετε το πλέγμα-αυτόματη ροή ιδιοκτησία (που είναι σειρά από προεπιλογή):

.grid-container {
display: grid;
grid-auto-flow: column;
}

Τώρα ιδού το αποτέλεσμα:

Για να καθορίσετε τον ακριβή αριθμό των στηλών που θέλετε σε κάθε γραμμή, χρησιμοποιήστε το πλέγμα-πρότυπο-στήλες:

.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 μπορούν να κάνουν ένα δισδιάστατο σύστημα διάταξης. Απλώς το κάνουν με διαφορετικούς τρόπους, με διαφορετικούς περιορισμούς.

Αυτό που είναι πιο σημαντικό είναι ο τρόπος με τον οποίο μπορείτε να ελέγξετε τη μονοδιάστατη πτυχή της διάταξης. Εξετάστε την παρακάτω εικόνα, για παράδειγμα:

Παρατηρήστε πόσο συνεπής είναι η στήλη 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 υπερέχει πραγματικά είναι όταν θέλετε να δημιουργήσετε ένα άκαμπτο σύστημα από τον γονέα. Ένα παράδειγμα είναι ένα σύνολο στοιχείων κάρτας που θα πρέπει να είναι εξίσου φαρδιά, ακόμα κι αν περιέχουν διαφορετικές ποσότητες περιεχομένου.

Αντικαταστήστε τη σήμανση μέσα στο ετικέτες με αυτό:

<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 ή το Flexbox;

Συνοπτικά, το CSS Grid είναι εξαιρετικό όταν θέλετε ένα δομημένο στοιχείο ελέγχου από την οπτική γωνία του γονέα, με ίσο μέγεθος στηλών, ανεξάρτητα από το μέγεθος των επιμέρους περιεχομένων του.

Το Flexbox, από την άλλη πλευρά, είναι ιδανικό όταν θέλετε ένα πιο ευέλικτο σύστημα που βασίζεται στο εγγενές μέγεθος των στοιχείων.