Δημιουργήστε Τέλειες Διατάξεις Flexbox

. Δημιουργήστε

κοντέινερ

display

flex-direction

flex-wrap

justify-content

align-items

align-content

Ιδιότητες

Items

3 items

Επιλεγμένο στοιχείο

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

Δημιουργημένος κωδικός

Δημοφιλείς προεπιλογές

Κέντρο οριζόντια

Content

Ιδανικό για κεντράρισμα λογότυπου, κουμπιού ή οποιουδήποτε στοιχείου τόσο οριζόντια όσο και κάθετα.

Ίση απόσταση

Item 1

Item 2

Item 3

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

Κατακόρυφο μενού

Home

About

Contact

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

Αποκριτικό πλέγμα Δημιουργήστε

Box 1

Box 2

Box 3

Box 4

Box 5

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

Hero Banner

Κύριος τίτλος

Ενότητα ήρωα με παρότρυνση για δράση

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

διάταξης

Company

About Us

Careers

Support

Κέντρο

Επικοινωνήστε μαζί μας 2023

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

Παραδείγματα

Γραμμή

Logo

Home

Products

About

Contact

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

Card Grid

κάρτας Κείμενο

περιγραφής κάρτας εδώ

Τίτλος κάρτας Κείμενο

περιγραφής κάρτας εδώ

Τίτλος κάρτας Κείμενο

περιγραφής κάρτας εδώ

Ένα αποκριτικό πλέγμα καρτών που προσαρμόζεται σε διαφορετικά μεγέθη οθόνης χρησιμοποιώντας ιδιότητες flexbox.

Διάταξη άρθρου HTML

Τίτλος

Δημοσιεύτηκε στις Ιανουάριος 1, 2023 · Χρόνος ανάγνωσης: 5 λεπτά Περιεχόμενο

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

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

διάταξης

Header

Sidebar

Κύριο περιεχόμενο

Footer

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

Βασικές αρχές Flexbox

Flexbox;

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

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Βασικές έννοιες:Το Flexbox εισάγει δύο βασικές έννοιες: τα εύκαμπταflex container and the αντικείμενα. Το κοντέινερ είναι το γονικό στοιχείο και τα στοιχεία είναι τα άμεσα θυγατρικά του.

Οι διατάξεις Main Axis vs Cross Axis

Flexbox βασίζονται σε δύο άξονες: τονmain axis and the εγκάρσιο άξονα.

Main Axis:Ο πρωτεύων άξονας κατά μήκος του οποίου είναι διατεταγμένα τα εύκαμπτα στοιχεία. Ορίζεται απόflex-direction.
τον εγκάρσιο άξονα:Ο άξονας κάθετος στον κύριο άξονα. Η κατεύθυνσή του εξαρτάται από την κατεύθυνση του κύριου άξονα.

Κύριος άξονας →

διασταυρούμενου άξονα

Start

Main

End

εμπορευματοκιβωτίου

Property	Description
`display`	Ορίζει ένα εύκαμπτο κοντέινερ. ενσωματωμένο ή μπλοκ ανάλογα με τη δεδομένη τιμή.
`flex-direction`	Καθορίζει τον κύριο άξονα, καθορίζοντας έτσι την κατεύθυνση που τοποθετούνται τα εύκαμπτα αντικείμενα στο εύκαμπτο δοχείο.
`flex-wrap`	Από προεπιλογή, όλα τα ευέλικτα στοιχεία θα προσπαθήσουν να χωρέσουν σε μία γραμμή. Μπορείτε να το αλλάξετε και να επιτρέψετε στα στοιχεία να αναδιπλώνονται ανάλογα με τις ανάγκες με αυτήν την ιδιότητα.
`justify-content`	Ευθυγραμμίζει τα εύκαμπτα στοιχεία κατά μήκος του κύριου άξονα της τρέχουσας γραμμής του εύκαμπτου δοχείου.
`align-items`	Ευθυγραμμίζει τα εύκαμπτα στοιχεία κατά μήκος του εγκάρσιου άξονα της τρέχουσας γραμμής του εύκαμπτου δοχείου.
`align-content`	Ευθυγραμμίζει τις γραμμές ενός εύκαμπτου κοντέινερ όταν υπάρχει επιπλέον χώρος στον εγκάρσιο άξονα.

Ιδιότητες

Property	Description
`order`	Από προεπιλογή, τα ευέλικτα στοιχεία είναι διατεταγμένα με τη σειρά προέλευσης. Ωστόσο, το`order`κατάλυμα ελέγχει τη σειρά στο που εμφανίζονται στο εύκαμπτο δοχείο.
`flex-grow`	Ορίζει την ικανότητα ανάπτυξης ενός εύκαμπτου στοιχείου εάν είναι απαραίτητο. Αποδέχεται μια ενιαία αξία που χρησιμεύει ως αναλογία.
`flex-shrink`	Ορίζει τη δυνατότητα συρρίκνωσης ενός εύκαμπτου στοιχείου εάν είναι απαραίτητο.
`flex-basis`	Ορίζει το αρχικό μέγεθος ενός εύκαμπτου στοιχείου πριν από την κατανομή οποιουδήποτε διαθέσιμου χώρου σύμφωνα με τους συντελεστές flex.
`align-self`	της προεπιλεγμένης στοίχισης (ή αυτής που καθορίζεται από`align-items`) για μεμονωμένα ευέλικτα στοιχεία.

Related Tools

Δημιουργήστε Μετασχηματισμούς CSS3 με Εύκολη Χρήση

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

Μετατροπέας γραφίδας σε CSS

Μετατρέψτε τον κώδικα SCSS σε CSS. Γρήγορα, εύκολα και με ασφάλεια.

Μετατροπέας SCSS σε CSS

Μετατρέψτε τον κώδικα SCSS σε CSS. Γρήγορα, εύκολα και με ασφάλεια.

Υπολογιστής hash SHA-1

Δημιουργήστε κατακερματισμούς SHA-1 γρήγορα και εύκολα

Υπολογιστής hash SHA3-256

Δημιουργήστε κατακερματισμούς SHA3-256 γρήγορα και εύκολα

Μετατροπέας λατινικών αριθμών σε αριθμούς

βήμα προς βήμα