Πώς να χρησιμοποιήσετε το Flex για να ευθυγραμμίσετε τα στοιχεία HTML

Οι ιδιότητες flex στο CSS σάς επιτρέπουν να ευθυγραμμίζετε τα στοιχεία με μεγαλύτερη ευελιξία και απόκριση. Αυτό το καθιστά χρήσιμο όταν θέλετε τα στοιχεία HTML σας να αποκρίνονται περισσότερο μέσα στο πρόγραμμα περιήγησης ιστού.

Αυτό το άρθρο θα εξετάσει πώς μπορείτε να χρησιμοποιήσετε ορισμένες ιδιότητες flex. Αυτό περιλαμβάνει τις ιδιότητες flex-direction, justify-content, align-self, align-item, align-content και gap.

Πώς να ρυθμίσετε την οθόνη CSS Flex

Ένα παράδειγμα δομής που μπορείτε να χρησιμοποιήσετε για να εξερευνήσετε τα βασικά του flexbox είναι ένα σύνολο παιδικών div κάτω από ένα μονογονεϊκό div. Στον παρακάτω κώδικα, υπάρχει ένα κύριο "γονικό" div. Τα τρία θυγατρικά div αντιπροσωπεύουν στοιχεία που μπορείτε να ευθυγραμμίσετε χρησιμοποιώντας ιδιότητες ευέλικτης.

Για να λειτουργήσει οποιοδήποτε ευέλικτο στυλ, θα χρειαστεί να προσθέσετε το οθόνη: flex ιδιοκτησία στο γονικό εύκαμπτο κοντέινερ.

.γονέας {
 οθόνη: flex;
}

Χωρίς flex, τα θυγατρικά div εμφανίζονται το ένα μετά το άλλο σε σχηματισμό στήλης κάτω στη σελίδα.

Για να δείτε ένα παράδειγμα αυτής της ρύθμισης, προβάλετε και εκτελέστε τον κώδικα σε αυτό Απόσπασμα CodePen.

Πώς να ελέγξετε την κατεύθυνση διάταξης

ο flex-direction Η ιδιότητα καθορίζει την κατεύθυνση της γραμμής ή της στήλης των θυγατρικών στοιχείων.

Οι επιλογές για την ιδιότητα flex-direction περιλαμβάνουν:

flex-direction: σειρά | στήλη | σειρά-αντίστροφη | στήλη-όπισθεν

Θα χρειαστεί να προσθέσετε ένα γονικό κοντέινερ που περιβάλλει τα στοιχεία που θέλετε να ευθυγραμμίσετε.

HTML:

CSS:

.red { background-color: red; }
.πορτοκαλί { φόντο-χρώμα: πορτοκαλί; }
.κίτρινο { φόντο-χρώμα: κίτρινο; }
.green { background-color: green;}
.μπλε { φόντο-χρώμα: μπλε; }
.μωβ { φόντο-χρώμα: μωβ; }
.parent div {
 πλάτος: 40 px;
 ύψος: 40 px;
}

Εφαρμόστε την ιδιότητα flex-direction στο γονικό δοχείο flex. Αυτό θα ευθυγραμμίσει τα στοιχεία θυγατρικής div.

.γονέας {
 πλάτος: 300 px;
 οθόνη: flex; 
 flex-direction: σειρά;
}

Πολλές ιδιότητες ευκαμψίας αναφέρονται στην έννοια του κύριου άξονα και του εγκάρσιου άξονα. Όταν η κατεύθυνση κάμψης είναι σειρά, ο κύριος άξονας αντιπροσωπεύει την οριζόντια κατεύθυνση και ο εγκάρσιος άξονας την κατακόρυφο. Μια τιμή στήλης αλλάζει αυτούς τους άξονες.

Δείτε τον κώδικα για την ιδιότητα flex-direction σε αυτό Απόσπασμα CodePen για να δείτε μερικά παραδείγματα.

Πώς να ευθυγραμμίσετε τα στοιχεία κατά μήκος του διασταυρούμενου άξονα

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

Οι επιλογές για την ιδιότητα align-item περιλαμβάνουν:

στοίχιση στοιχείων: flex-start | flex-end | στοίχιση-στοιχεία | τέντωμα

Προσθέστε την ιδιότητα align-item στο γονικό κοντέινερ για να ευθυγραμμίσετε τα παιδιά του.

.γονέας {
 οθόνη: flex; 
 align-item: flex-start;
}

Επιπλέον, μπορείτε να επιλέξετε να ευθυγραμμίσετε τα στοιχεία χρησιμοποιώντας μια γραμμή βάσης. Από προεπιλογή, η επιλογή γραμμής βάσης ευθυγραμμίζει όλα τα στοιχεία με βάση τη βάση των στοιχείων.

Μπορείτε επίσης να επιλέξετε από πού ξεκινά η γραμμή βάσης, όπως το επάνω (πρώτη γραμμή βάσης) ή το κάτω μέρος (τελευταία γραμμή βάσης).

στοίχιση-στοιχεία: γραμμή βάσης | πρώτη γραμμή βάσης | τελευταία γραμμή βάσης·

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

​​​

Δείτε τον κώδικα για την ιδιότητα align-item σε αυτό Απόσπασμα CodePen για να δείτε μερικά παραδείγματα.

Πώς να παρακάμψετε την ευθυγράμμιση σε μεμονωμένα στοιχεία

Μπορείτε να χρησιμοποιήσετε το ευθυγραμμίζομαι ιδιότητα να παρακάμπτει τυχόν στυλ στοίχισης στοιχείων του γονικού κοντέινερ. Αυτό σημαίνει ότι μπορείτε να ορίσετε μια ξεχωριστή ευθυγράμμιση ευέλικτης σε ένα μεμονωμένο στοιχείο.

Οι επιλογές για την ιδιότητα align-self περιλαμβάνουν:

align-self: auto | flex-start | flex-end | κέντρο | γραμμή βάσης | τέντωμα

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

.γονέας {
 οθόνη: flex; 
 flex-direction: σειρά;
}

Μπορείτε να εφαρμόσετε την ιδιότητα align-self στο μεμονωμένο στοιχείο. Το μεμονωμένο στοιχείο θα χρησιμοποιήσει το στυλ της ιδιότητας align-self και θα κεντράρει το στοιχείο στο γονικό κοντέινερ.

Δείτε τον κωδικό για την ιδιότητα align-self σε αυτό Απόσπασμα CodePen για να δείτε μερικά παραδείγματα.

Πώς να κατανείμετε τις γραμμές κατά μήκος του διασταυρούμενου άξονα

ο ευθυγράμμιση-περιεχόμενο Η ιδιοκτησία ευθυγραμμίζει τα παιδιά κατά μήκος του κατακόρυφου άξονα. Μπορεί επίσης να καθορίσει την απόσταση μεταξύ των στοιχείων που βρίσκονται σε πολλές γραμμές.

Οι επιλογές για την ιδιότητα align-content περιλαμβάνουν:

align-content: flex-start | flex-end | κέντρο | τέντωμα | διάστημα-ανάμεσα | χώρο-γύρω

Προσθέστε την ιδιότητα align-content στο γονικό εύκαμπτο κοντέινερ. Η ιδιότητα align-content θα λειτουργήσει μόνο εάν έχει οριστεί η ιδιότητα flex-wrap. Προσθήκη flex-wrap: τυλίξτε το στο γονικό κοντέινερ και μειώστε το πλάτος του γονικού div για να πιέσετε τα στοιχεία σε περισσότερες από μία γραμμές.

.γονέας {
 flex-wrap: τυλίξτε;
 οθόνη: flex;
 align-content: flex-start;
 πλάτος: 180 px;
}

Δείτε τον κώδικα για την ιδιότητα align-content σε αυτό Απόσπασμα CodePen για να δείτε μερικά παραδείγματα.

Πώς να ευθυγραμμίσετε τα στοιχεία στον κύριο άξονα

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

Οι επιλογές για την ιδιότητα justify-content περιλαμβάνουν:

justify-content: flex-start | flex-end | κέντρο | διάστημα-ανάμεσα | διάστημα-γύρω | χώρο-ομοιόμορφα

Τυλίξτε τα στοιχεία που θέλετε να ευθυγραμμίσετε κάτω από ένα γονικό εύκαμπτο δοχείο.

HTML:

CSS:

.red { background-color: red; }
.green { φόντο-χρώμα: ανοιχτό πράσινο; }
.μπλε { φόντο-χρώμα: μπλε; }

Προσθέστε την ιδιότητα justify-content στο γονικό κοντέινερ flex.

.γονέας {
 πλάτος: 300 px;
 οθόνη: flex; 
 justify-content: flex-start;
}

Η ιδιότητα justify-content υποστηρίζει επίσης τιμές που αναφέρονται στην προδιαγραφή CSS Box Alignment. Αυτό περιλαμβάνει τιμές όπως "έναρξη", "τέλος", "αριστερά" και "δεξιά". Ορισμένα προγράμματα περιήγησης δεν τα υποστηρίζουν.

Η ιδιότητα justify-content έχει επίσης μια "ασφαλή" λέξη-κλειδί που μπορείτε να χρησιμοποιήσετε. Αυτό διασφαλίζει ότι τα στοιχεία προσπαθούν να παραμείνουν εντός της εμβέλειας του μητρικού κοντέινερ.

Χρησιμοποιείται επίσης για την αποτροπή απώλειας δεδομένων, σε περίπτωση που κεντράρετε μια μεγάλη λέξη. Η χρήση της ασφαλούς λέξης-κλειδιού αποτρέπει ένα μικρότερο div από το να κόψει το πρώτο και το τελευταίο γράμμα.

.γονέας {
 οθόνη: flex; 
 justify-content: ασφαλές κέντρο;
}

Η ασφαλής λέξη-κλειδί περιορίζεται επίσης σε ορισμένα προγράμματα περιήγησης. Μπορείτε να ελέγξετε τη συμβατότητα στο Μπορώ να χρησιμοποιήσω.

Δείτε τον κωδικό για την ιδιότητα justify-content σε αυτό Απόσπασμα CodePen για να δείτε μερικά παραδείγματα.

Τρόπος προσθήκης απόστασης μεταξύ στοιχείων

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

Εφαρμόστε την ιδιότητα gap στο γονικό εύκαμπτο δοχείο.

.γονέας {
 οθόνη: flex;
 κενό: 70 px;
}

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

.γονέας { 
 πλάτος: 300 px;
 κενό: 120 px;
}

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

.γονέας { 
 πλάτος: 300 px;
 flex-wrap: τυλίξτε;
 κενό: 120 px;
}

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

Η ιδιότητα row-gap καθορίζει το διάστημα μεταξύ κάθε σειράς. Η ιδιότητα στήλη-κενό καθορίζει το διάστημα μεταξύ κάθε στήλης.

.γονέας { 
 διάκενο σειράς: 120 px; 
}
.γονέας { 
 διάκενο στήλης: 120 px; 
}

Δείτε τον κωδικό για την ιδιότητα κενού σε αυτό Απόσπασμα CodePen για να δείτε μερικά παραδείγματα.

Χρήση περισσότερων ιδιοτήτων Flex στον ιστότοπό σας

Ας ελπίσουμε ότι τώρα είστε εξοικειωμένοι με τις διάφορες ιδιότητες flex που μπορείτε να χρησιμοποιήσετε για να ευθυγραμμίσετε στοιχεία στην ιστοσελίδα σας. Αυτό περιλαμβάνει τον τρόπο χρήσης των ιδιοτήτων flex-direction, justify-content, align-self, align-item, align-content και gap.

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

11 Χρήσιμα εργαλεία για έλεγχο, καθαρισμό και βελτιστοποίηση αρχείων CSS

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα