Γραμμή πλοήγησης CSS Flexbox — Λογότυπο Αριστερά, Σύνδεσμοι δεξιά

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

Το space-between είναι αυτό που κάνει αυτό να λειτουργεί: καρφιτσώνει το πρώτο παιδί στην αρχική άκρη και το τελευταίο παιδί στην άκρη, στη συνέχεια απλώνει ομοιόμορφα τα υπόλοιπα παιδιά μεταξύ τους — ακριβώς το αριστερό λογότυπο, οι δεξιοί σύνδεσμοι διαμορφώνουν σχεδόν κάθε κεφαλίδα ιστότοπου που χρησιμοποιεί. align-items: το κέντρο, στη συνέχεια, επιλύει την κάθετη στοίχιση που χρειάζονταν hacks ύψους γραμμής ή κόλπα εμφάνισης κελιών πίνακα.

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