सीएसएस फ्लेक्सबॉक्स नेवबार - लोगो बाएँ, लिंक दाएँ

यह पृष्ठ फ्लेक्सबॉक्स जेनरेटर प्रीसेट को क्लासिक नेवबार लेआउट में खोलता है: जस्टिफाई-कंटेंट को स्पेस-बीच में सेट किया गया है और एलाइन-आइटम को केंद्र में सेट किया गया है। पहले बॉक्स में एक लोगो और आखिरी बॉक्स में नेविगेशन लिंक की एक पंक्ति रखें (या लिंक को मध्य बॉक्स में विभाजित करें) और फ्लेक्सबॉक्स कंटेनर उन्हें बार के विपरीत छोर पर धकेलता है, जबकि प्रत्येक आइटम को एक ही ऊर्ध्वाधर केंद्र पर पंक्तिबद्ध रखता है, चाहे लोगो या लिंक टेक्स्ट कितना भी लंबा क्यों न हो।

स्पेस-बीच वह है जो यह काम करता है: यह पहले बच्चे को शुरुआती किनारे पर और आखिरी बच्चे को अंतिम किनारे पर पिन करता है, फिर शेष बचे बच्चों को उनके बीच समान रूप से फैलाता है - बिल्कुल बाएं-लोगो, दाएं-लिंक आकार लगभग हर साइट हेडर का उपयोग करता है। संरेखण-आइटम: केंद्र फिर ऊर्ध्वाधर संरेखण को हल करता है जिसके लिए लाइन-ऊंचाई हैक या टेबल-सेल डिस्प्ले ट्रिक्स की आवश्यकता होती है।

अपने वास्तविक नेवबार से मिलान करने के लिए चाइल्ड काउंट को समायोजित करें - एक नंगे लोगो और सीटीए बार के लिए दो बॉक्स, लोगो के लिए और अधिक और कई लिंक - और लेआउट को लाइव रूपांतरित होते हुए देखें। एक बार सीएसएस ब्लॉक आपके हेडर से मेल खाने के बाद उसे कॉपी कर लें, या यदि आप उस एक संपत्ति की तुलना उसके करीबी रिश्तेदारों से देखना चाहते हैं तो प्रीसेट के बीच का स्थान खोलें।