Πίνακας περιεχομένων:

Τι είναι ένα δοχείο Flexbox;
Τι είναι ένα δοχείο Flexbox;

Βίντεο: Τι είναι ένα δοχείο Flexbox;

Βίντεο: Τι είναι ένα δοχείο Flexbox;
Βίντεο: How To Add FlexBox Container To Elementor Pro 2023 2024, Ενδέχεται
Anonim

ΕΝΑ εύκαμπτο δοχείο επεκτείνει τα στοιχεία για να γεμίσει τον διαθέσιμο ελεύθερο χώρο ή τα συρρικνώνει για να αποτρέψει την υπερχείλιση. Το πιο σημαντικό, το flexbox Η διάταξη είναι αγνωστική ως προς την κατεύθυνση σε αντίθεση με τις κανονικές διατάξεις (μπλοκ που βασίζεται κάθετα και ενσωματωμένο που βασίζεται σε οριζόντια).

Σε σχέση με αυτό, πώς χρησιμοποιείτε το Flexbox;

Περίληψη

  1. Χρήση οθόνης: flex; για να δημιουργήσετε ένα εύκαμπτο δοχείο.
  2. Χρησιμοποιήστε το justify-content για να ορίσετε την οριζόντια στοίχιση των στοιχείων.
  3. Χρησιμοποιήστε στοιχεία στοίχισης για να ορίσετε την κατακόρυφη στοίχιση των στοιχείων.
  4. Χρησιμοποιήστε flex-direction εάν χρειάζεστε στήλες αντί για γραμμές.
  5. Χρησιμοποιήστε τις τιμές αντίστροφης γραμμής ή αντίστροφης στήλης για να αναστρέψετε τη σειρά των στοιχείων.

πώς φτιάχνεις ένα δοχείο Flex; Προτού μπορέσετε να χρησιμοποιήσετε οποιοδήποτε flexbox ιδιοκτησία, πρέπει να ορίσετε α εύκαμπτο δοχείο στη διάταξή σας. Εσείς δημιουργήστε ένα εύκαμπτο δοχείο ορίζοντας την ιδιότητα εμφάνισης ενός στοιχείου σε ένα από τα flexbox τιμές διάταξης: καλώδιο ή εν σειρά- καλώδιο . Από προεπιλογή, καλώδιο τα στοιχεία τοποθετούνται οριζόντια στον κύριο άξονα από αριστερά προς τα δεξιά.

Με αυτόν τον τρόπο, σε τι χρησιμοποιείται το Flexbox;

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

Ποιος είναι ο προεπιλεγμένος προσανατολισμός σε ένα κοντέινερ Flex;

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

Συνιστάται: