Πώς να χρησιμοποιήσετε το Flex για να κάνετε τον ιστότοπό σας πιο αποκριτικό

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

Ορισμένες ιδιότητες flex, όπως flex-wrap ή flex-grow μπορούν να αλλάξουν το μέγεθος ή τη θέση ενός στοιχείου με οπτικά ελκυστικό τρόπο. Αυτό το άρθρο θα περιλαμβάνει παραδείγματα για το πώς μπορείτε να χρησιμοποιήσετε τις ιδιότητες flex-grow, flex-shrink, flex-wrap, flex-flow και order flex.

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

Εάν δεν είστε εξοικειωμένοι με τα βασικά του flexbox, μπορείτε να το εξερευνήσετε Απόσπασμα CodePen. Περιλαμβάνει παράδειγμα κώδικα για μια απλή ρύθμιση του flexbox. Αρχικά, θα χρειαστεί να τυλίξετε τα παιδικά αντικείμενα κάτω από ένα γονικό div ή "flex δοχείο".

<div class="μητρική εταιρεία">
<div class="παιδί-αντικείμενο"></div>
<div class="παιδί-αντικείμενο"></div>
<div class="παιδί-αντικείμενο"></div>
</div>

Πρόσθεσε το οθόνη: flex ιδιοκτησία στη μητρική διαμ.

.μητρική εταιρεία {
 οθόνη: flex;
}

Πώς να καλλιεργήσετε αντικείμενα μέσα σε ένα κοντέινερ

ο flex-grow Η ιδιότητα επιτρέπει στα θυγατρικά στοιχεία να επεκταθούν για να γεμίσουν τον διαθέσιμο χώρο στο γονικό του τμήμα. Αυτή η ιδιότητα σάς επιτρέπει να καθορίσετε την "αναλογία" του χώρου που μπορεί να καταλάβει κάθε στοιχείο του πλαισίου.

Για να προσθέσετε flex-grow, προσθέστε την ιδιότητα flex-grow CSS σε καθένα από τα θυγατρικά στοιχεία.

<div class="μητρική εταιρεία">
<div style="Χρώμα φόντου: κόκκινο; flex-grow: 1"></div>
<div style="Χρώμα φόντου: πορτοκαλί; flex-grow: 1"></div>
<div style="Χρώμα φόντου: κίτρινο; flex-grow: 1"></div>
<div style="Χρώμα φόντου: πράσινο; flex-grow: 3"></div>
<div style="Χρώμα φόντου: μπλε; flex-grow: 1"></div>
</div>

.μητρική εταιρεία {
 πλάτος: 500 px;
 οθόνη: flex; 
}

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

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

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

<div style="Χρώμα φόντου: πράσινο; flex-grow: 3"></div>

Το πράσινο πλαίσιο θα προσπαθήσει να κερδίσει έως και τριπλάσιο χώρο από τα άλλα κουτιά.

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

Πώς να συρρικνώσετε τα αντικείμενα μέσα σε ένα κοντέινερ

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

Το Flex-shrink σάς επιτρέπει να καθορίσετε μια αναλογία για το πόσο πρέπει να συρρικνωθεί κάθε στοιχείο.

Προσθέστε την ιδιότητα flex-shrink στα στοιχεία του παιδιού div. Αλλάξτε τα πλάτη του γονέα και των παιδιών έτσι ώστε τα αντικείμενα να μην χωρούν στο δοχείο.

<div class="μητρική εταιρεία">
<div style="Χρώμα φόντου: κόκκινο; ελαστική συρρίκνωση: 1"></div>
<div style="Χρώμα φόντου: πορτοκαλί; ελαστική συρρίκνωση: 1"></div>
<div style="Χρώμα φόντου: κίτρινο; ελαστική συρρίκνωση: 1"></div>
<div style="Χρώμα φόντου: πράσινο; ελαστική συρρίκνωση: 2"></div>
<div style="Χρώμα φόντου: μπλε; ελαστική συρρίκνωση: 1"></div>
</div>

.μητρική εταιρεία {
 πλάτος: 500 px;
 οθόνη: flex; 
}
.μητρική εταιρεία div {
 πλάτος: 150 px;
 ύψος: 150 px;
}

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

Αν ένα από τα στοιχεία είχε μεγαλύτερο flex-shrink, για παράδειγμα:

<div style="Χρώμα φόντου: πράσινο; ελαστική συρρίκνωση: 2"></div>

Το πράσινο πλαίσιο θα προσπαθήσει να συρρικνωθεί δύο φορές περισσότερο από τα άλλα κουτιά.

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

Πώς να ωθήσετε αντικείμενα στην επόμενη σειρά

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

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

flex-wrap: nowrap | τυλίγω | τυλίγω-αντίστροφα

Προσθέστε την ιδιότητα flex-wrap στο γονικό flex-container. Βεβαιωθείτε ότι το πλάτος του δοχείου είναι αρκετά μικρό, ώστε να μην χωράει τα παιδικά αντικείμενα μέσα σε αυτό. Αυτό θα αναγκάσει τυχόν υπερχειλισμένα στοιχεία σε μια νέα σειρά.

<div class="μητρική εταιρεία">
<div class="το κόκκινο"></div>
<div class="πορτοκάλι"></div>
<div class="κίτρινος"></div>
<div class="πράσινος"></div>
<div class="μπλε"></div>
</div>

.μητρική εταιρεία {
 πλάτος: 300 px;
 περίγραμμα: 1px συμπαγές μαύρο.
 οθόνη: flex;
 flex-wrap: τυλίξτε;
}
.μητρική εταιρεία div {
 πλάτος: 100 px;
 ύψος: 100 px;
}

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

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

Εάν θέλετε να καταργήσετε αυτό το διάστημα, αλλά να διατηρήσετε το ύψος του γονικού div, χρησιμοποιήστε την ιδιότητα align-content. Καθορίστε την ιδιότητα align-content ως "flex-start" στο γονικό div:

.μητρική εταιρεία { 
 πλάτος: 300 px; 
 ύψος: 300 px;
 περίγραμμα: 1px συμπαγές μαύρο. 
 οθόνη: flex;
 flex-wrap: τυλίξτε; 
 align-content: flex-αρχή;
}

Η ιδιότητα align-content είναι ένας από τους πολλούς πυρήνες ιδιότητες flexbox που σας επιτρέπουν να ελέγχετε την ευθυγράμμιση.

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

Πώς να ωθήσετε αντικείμενα στην επόμενη στήλη

Εάν χρησιμοποιείτε διαφορετική διάταξη (όπως στήλη) και εξακολουθείτε να χρειάζεστε τα στοιχεία για αναδίπλωση, μπορείτε να χρησιμοποιήσετε το flex-flow ιδιοκτησία. Αυτή η ιδιότητα flex είναι ένας συνδυασμός των ιδιοτήτων flex-wrap και flex-direction.

Παραδείγματα συνδυασμών επιλογών που μπορείτε να χρησιμοποιήσετε για την ιδιότητα flex-flow περιλαμβάνουν:

flex-wrap: σειρά nowrap | στήλη nowrap | περιτύλιγμα σειράς | περιτύλιγμα στήλης | αναδίπλωση σειράς-αντίστροφη | αναδίπλωση στήλης-αντίστροφη

Αυτή η ιδιότητα λειτουργεί παρόμοια με την παραπάνω ιδιότητα flex-wrap. Προσθέστε flex-flow στο μητρικό δοχείο flex. Βεβαιωθείτε ότι το πλάτος του γονικού κοντέινερ είναι αρκετά μικρό ώστε να αναγκάσει τα παιδικά αντικείμενα να τυλίξουν:

.μητρική εταιρεία {
 πλάτος: 300 px; 
 περίγραμμα: 1px συμπαγές μαύρο. 
 οθόνη: flex; 
 flex-flow: περιτύλιγμα στήλης.
}
.μητρική εταιρεία div {
 πλάτος: 100 px;
 ύψος: 100 px;
}

Τα στοιχεία θα τυλιχτούν προς την καθορισμένη κατεύθυνση (σειρά ή στήλη).

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

Πώς να αλλάξετε τη σειρά των αντικειμένων

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

Οι αριθμοί δεν είναι απαραίτητο να ξεκινούν από το 1. Μπορείτε να χρησιμοποιήσετε οποιουσδήποτε αριθμούς και διαστήματα και η ιδιότητα παραγγελίας θα ταξινομήσει τα στοιχεία HTML από το χαμηλότερο προς το υψηλότερο.

Προσθέστε την ιδιότητα παραγγελίας σε καθένα από τα στοιχεία μέσα στο γονικό εύκαμπτο κοντέινερ:

<div class="μητρική εταιρεία">
<div class="το κόκκινο" στυλ="παραγγελία: 2"></div>
<div class="πορτοκάλι" στυλ="παραγγελία: 1"></div>
<div class="κίτρινος" στυλ="παραγγελία: 5"></div>
<div class="πράσινος" στυλ="παραγγελία: 4"></div>
<div class="μπλε" στυλ="παραγγελία: 3"></div>
</div>

Σε αυτήν την περίπτωση, το πορτοκαλί πλαίσιο θα βρίσκεται στα δεξιά, ακολουθούμενο από τα κόκκινα, μπλε, πράσινα και μετά κίτρινα πλαίσια.

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

Πειραματιστείτε με περισσότερες ιδιότητες CSS στον ιστότοπό σας

Μπορείτε να χρησιμοποιήσετε αυτές τις ευέλικτες ιδιότητες για να κάνετε τον ιστότοπό σας πιο αποκριτικό. Αυτό περιλαμβάνει τη χρήση των ιδιοτήτων flex-grow, flex-shrink, flex-wrap, flex-flow και order flex.

Μπορείτε επίσης να μάθετε για περισσότερες ευέλικτες ιδιότητες που θα σας βοηθήσουν να ευθυγραμμίσετε τα στοιχεία HTML στον ιστότοπό σας.

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

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

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