Flexbox στο CSS & HTML (Οδηγός) - ανάπτυξη ανταποκριτικών διατάξεων

Αυτό σε περιμένει στο μάθημα για το Flexbox στο CSS και HTML.

Τι είναι το Flexbox-Layout και γιατί πρέπει να το χρησιμοποιήσει κανείς;

Εδώ έχει δημιουργηθεί το έργο, στο οποίο στη συνέχεια θα εργαστούμε.

Παρουσιάζω εδώ τη δομή του παραδείγματος και τις δυνατότητες αποσφαλμάτωσης που έχουν ενσωματωθεί στο VS-Code με τα εργαλεία του MS Edge. Επιπλέον, σε αυτό το βίντεο ενεργοποιείται για πρώτη φορά το Flexbox-Layout και ρυθμίζεται η κατεύθυνση.

Πώς μπορεί να διαιρεθεί το χώρο ομοιόμορφα ή με συγκεκριμένες αναλογίες στη διάταξη Flexbox;

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

Εδώ παρουσιάζω ένα οριζόντιο διάταξη με δύο πλαϊνές μπάρες, η οποία προσαρμόζεται ανταποκριτικά στο πλάτος.

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

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

Μια μικρή άσκηση για τον εκτοπισμό ενός κύβου.

Δεν είναι μόνο δυνατή η ευθυγράμμιση κατά μήκος του κάθετου άξονα σε έναν ευέλικτο container, αλλά μπορείτε επίσης να προσαρμόσετε αρκετά την ευθυγράμμιση κατά μήκος του κύριου άξονα. ;-)

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

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

Κατά πόσο πρέπει να μεγαλώσει ένα στοιχείο όταν υπάρχει περισσότερος χώρος από ό,τι ορίζει το flex-basis; Αυτό μπορεί να ρυθμιστεί ειδικά με το flex-grow.

Κατά πόσο πρέπει να συρρικνώσει ένα στοιχείο όταν υπάρχει λιγότερος χώρος από ό,τι αναφέρει το flex-basis; Αυτό μπορεί να ρυθμιστεί με το flex-shrink. 

Τα παιδικά στοιχεία μπορεί όχι μόνο να συρρικνώνονται όταν υπάρχει λιγότερος χώρος, αλλά μπορεί επίσης να αναστρέφονται από τον εμφανιζόμενο χωρίς περιττά στοιχεία. Πώς να το ελέγξετε αυτό με το flex-wrap δείχνω σε αυτό το βίντεο.

flex-direction και flex-wrap μπορούν να συνδυαστούν στην ιδιότητα flex-flow. Αυτό ακόμα έχει νόημα αν θέλετε να ορίσετε μόνο το flex-direction, επειδή το flex-flow είναι πιο σύντομο. ;-)

Μια εργασία για το flex-wrap.

Μερικές φορές χρειάζεται απόσταση, ώστε να μην κάνει άβολη το ανθρώπινο μάτι. Ευτυχώς, υπάρχει η CSS ιδιότητα gap, η οποία επιτυγχάνει ακριβώς αυτό στα παιδικά στοιχεία ενός Flex-Container.

Η τάξη πρέπει να διατηρείται, ειδικά στις διαδικτυακές διεπαφές, καθώς πρέπει να είναι εύκολες στη χρήση. Η σειρά πρέπει μερικές φορές να καθορίζεται ατομικά, χωρίς να μετακινήσουμε στοιχεία στο DOM. Γι' αυτό, η ιδιότητα CSS order είναι πολύ κατάλληλη, με την οποία μπορούμε να αλλάξουμε εύκολα την ορατή σειρά των στοιχείων.

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

Συχνά συμβαίνει να θέλετε να κεντράρετε στοιχεία και κυρίως κείμενο οριζόντια και κατακόρυφα (!). Αυτό που ήταν μαρτύριο πριν την Flexbox, είναι τώρα παιχνιδάκι.

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

Υπάρχουν ιστοσελίδες χωρίς φόρμες; Αν ναι, δεν είναι πολλές. Γι'αυτό είναι πολύ σημαντικό να τις διαμορφώνουμε ελκυστικά, κάτι που ευτυχώς δεν είναι πρόβλημα με το Flexbox.

Πολύ συχνά αντιμετωπίζουμε διακεκριμένα layouts, αλλά με τη διάταξη Flex ακόμα και τα τέτοια δεν αποτελούν πλέον μεγάλη πρόκληση.

Πλέον υπάρχουν web-πελάτες συνομιλίας σαν τα αστεράκια στον ουρανό και με τους chatbots Τεχνητής Νοημοσύνης έχουν προστεθεί και άλλοι. Αλλά πώς μπορεί κανείς να υλοποιήσει μια συνομιλία με το Flexbox; Αυτό σας δείχνω σε αυτό το βίντεο.

Τουλάχιστον από την εποχή του Web 2.0, βρίσκουμε σχεδόν σε κάθε ιστοσελίδα μία γκαλερί. Σε αυτό το βίντεο περιγράφω πώς ένα τέτοιο σχέδιο μπορεί να υλοποιηθεί υπέροχα με Flexbox.

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