Πώς να εφαρμόσετε οριζόντια κύλιση χρησιμοποιώντας το Flexbox

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

Διάταξη έργου

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

Στυλ του Έργου

Το επόμενο βήμα είναι να προσθέσετε στυλ έτσι ώστε το κοντέινερ να κυλά οριζόντια. Για να το κάνω αυτό κάνω την εμφάνιση του κοντέινερ ως flexbox. Επιπλέον, ρυθμίζω την τιμή υπερχείλισης-x σε αυτόματο. Εδώ είναι το στυλ:

.container { display: flex; overflow-x: auto;}

Αυτή είναι η οριζόντια κύλιση:

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

  • Προσθέστε κενό διάστημα μεταξύ των εικόνων
  • Απαλλαγείτε από την οριζόντια γραμμή κύλισης
  • Τοποθετήστε τον κύλινδρο στο κέντρο της οθόνης

Οι εικόνες αγγίζουν. Ας προσθέσουμε λίγο κενό μεταξύ τους. Εδώ είναι το CSS για αυτό:

.container img { margin-right: 15px;}

Στη συνέχεια θέλω να απαλλαγώ από την οριζόντια γραμμή κύλισης που μπορώ να κάνω με αυτόν τον κώδικα:

.container::-webkit-scrollbar { display: none;}

Η τελευταία αλλαγή που θέλω να κάνω είναι να κεντράρω την κύλιση είναι στο κέντρο της οθόνης. Από προεπιλογή, το ύψος του html είναι το ύψος των στοιχείων. Πρέπει να κάνω το ύψος να είναι 100% της θύρας προβολής. Το Flexbox παρέχει έναν τρόπο κεντραρίσματος στοιχείων με τη ρύθμιση ευθυγράμμισης στοιχείων Για να χρησιμοποιήσω αυτήν τη λειτουργικότητα, πρόκειται να μετατρέψω την bodyοθόνη ως flexbox. Εδώ είναι ο κωδικός που πρόκειται να προσθέσω για το σώμα:

body { display: flex; align-items: center; height: 100vh;}

Με αυτές τις αλλαγές, φαίνεται η τελική οριζόντια περιοχή κύλισης.

συμπέρασμα

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

Ακολουθούν μερικά ακόμη άρθρα που ίσως θέλετε να διαβάσετε:

Εδώ είναι 5 διατάξεις που μπορείτε να κάνετε με το FlexBox

Το CSS Flexible Box Layout - Flexbox - παρέχει μια απλή λύση για τα προβλήματα σχεδιασμού και διάταξης σχεδιαστών και… hackernoon.com Σκεφτείτε έξω από το κουτί με σχήμα CSS

Το CSS βασίζεται σε ένα μοντέλο κουτιού. Εάν έχετε μια εικόνα που είναι ένας κύκλος που θέλετε να τυλίξετε κείμενο, θα τυλίξει… hackernoon.com Μάθετε την ιδιότητα CSS border-radius δημιουργώντας μια αριθμομηχανή

Έχετε δει ποτέ ένα κουμπί σε μια ιστοσελίδα που έχει στρογγυλεμένες άκρες; Έχετε δει ποτέ μια εικόνα που ταιριάζει σε ένα… medium.freecodecamp.org