Με κάθε νέα αναθεώρηση του CSS, εμφανίζεται μια πληθώρα νέων, συναρπαστικών χαρακτηριστικών. ένα από τα οποία είναι η υποτιμημένη εμφάνιση: προσέγγιση flex.

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

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

Μερικά ωραία χαρακτηριστικά του νέου μοντέλου περιλαμβάνουν:

  • Εύκολη αναλογία με βάση το μέγεθος; δεν χρειάζεται να αγγίζετε το HTML σας
  • Αλλάξτε τη σειρά με ένα αεράκι χρησιμοποιώντας ακέραιους αριθμούς μέσα στο φύλλο στυλ
  • Ισχύει για όλα τα στοιχεία του παιδιού μέσα σε ένα γονέα που έχει οριστεί σωστά
  • Δεν υπάρχουν πλέον ξεκάθαρες επιδιορθώσεις!

Σε μέρος 2ο θα ρίξουμε μια ματιά στο πώς να το κάνουμε αυτό ακόμα περισσότερο και θα μετατρέψουμε τη διάταξη flexbox σας σε ένα πλήρως ανταποκρινόμενο σχέδιο!

Έχετε χρησιμοποιήσει την προσέγγιση flex box για τη διάταξη; Προτιμάτε διαφορετική μέθοδο; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, ευέλικτη εικόνα μέσω Shutterstock.