फ्लेक्सबॉक्स के साथ एक उत्तरदायी वेबसाइट लेआउट बनाएं (चरण-दर-चरण मार्गदर्शिका)

फ्लेक्सबॉक्स एक अपेक्षाकृत नया फ्रंट-एंड फीचर है जो वेबसाइट लेआउट (और इसे उत्तरदायी बनाता है!) को पहले की तुलना में बहुत आसान बनाता है।

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

यदि आप वेब डेवलपमेंट ट्रेंड के साथ अपडेट रहना चाहते हैं, तो आप निश्चित रूप से जानना चाहते हैं कि फ्लेक्सबॉक्स का उपयोग कैसे किया जाता है।

क्योंकि फ्लोट ग्रिड तेजी से अतीत की बात बनते जा रहे हैं।

यह चरण-दर-चरण मार्गदर्शिका आपको एक सरल प्रतिक्रियाशील वेबसाइट लेआउट बनाने की प्रक्रिया में ले जाएगी।

इस ट्यूटोरियल में आप क्या करने की उम्मीद कर सकते हैं, इस पर एक त्वरित नज़र डालें:

एक साधारण वेबसाइट लेआउट बनाने के चरण

संरेखित करें कि मोबाइल, टैबलेट और डेस्कटॉप पर लेआउट कैसा दिखेगा।
सिमेंटिक HTML और CSS का उपयोग करके मूल लेआउट को कोड करना प्रारंभ करें।
अनुभाग दर अनुभाग जाकर, शेष लेआउट बनाएं।
अपने CSS में, मोबाइल-प्रथम दृष्टिकोण का पालन करें, सबसे छोटी चौड़ाई के लिए शैलियों का निर्माण करें, फिर उत्तरोत्तर अधिक चौड़ाई के लिए।

जैसे-जैसे मैं आगे बढ़ूंगा, मैं अपनी विचार प्रक्रियाओं की व्याख्या करूंगा, और जो मैंने पाया है उसे अच्छे अभ्यास के रूप में साझा करूंगा।

अच्छा प्रतीत होता है? आइए शुरू करें!

वेबसाइट लेआउट को वायरफ़्रेम करना

वायरफ्रेम आपकी वेबसाइट के सभी संगठनात्मक भागों के आरेख हैं। वे बहुत विस्तृत हो सकते हैं, लगभग डिजाइनों की तरह, या वे बुनियादी हो सकते हैं और मुख्य पहलुओं का दस्तावेजीकरण कर सकते हैं।

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

हम जिन अनुभागों का निर्माण करेंगे उनमें हैडर, हीरो, सामग्री अनुभाग, साइडबार और पाद लेख शामिल होंगे।

मैं अपने बुनियादी वायरफ्रेम बनाने के लिए MockFlow नामक एक ऑनलाइन टूल का उपयोग करता हूं।

ये रहा मोबाइल लेआउट:

फ्लेक्सबॉक्स के साथ एक उत्तरदायी वेबसाइट लेआउट बनाएं (चरण-दर-चरण मार्गदर्शिका)

आप देख सकते हैं कि सभी अनुभाग मूल रूप से साइडबार सहित एक लंबे कॉलम में एक दूसरे के ऊपर ढेर हो गए हैं।

स्टैकिंग सामग्री को मोबाइल फ़ोन जैसे संकीर्ण डिवाइस पर कुशलता से फ़िट करने का सबसे बुनियादी तरीका है।

नियमित सामग्री के बगल में साइडबार बनाने की कोशिश करने का कोई मतलब नहीं होगा, क्योंकि फोन दोनों ही साथ-साथ फिट होने के लिए पर्याप्त चौड़े नहीं हैं।

अब चौड़ाई में ऊपर जा रहा है– यह टैबलेट लेआउट है:

यहां मुख्य अंतर यह है कि चूंकि टैबलेट फोन की तुलना में काफी व्यापक हैं, अब हम मुख्य सामग्री अनुभाग के बगल में साइडबार फिट कर सकते हैं। और सभी अनुभाग टेबलेट की पूरी चौड़ाई पर कब्जा कर लेते हैं।

और सबसे बड़े डिवाइस के लिए- यहां डेस्कटॉप लेआउट है:

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

यदि हम वेबसाइट की सामग्री को बड़े मॉनीटर पर पूरी-चौड़ाई में विस्तारित करते, तो सामग्री को पढ़ना और स्कैन करना कठिन हो जाता।

कल्पना कीजिए कि आपकी आंखें बाईं से दाईं ओर पूरी तरह से यात्रा करने के लिए मजबूर हैं। यह बहुत अधिक काम है, और यह आपके उपयोगकर्ताओं को दूर कर देगा।

व्यापक स्क्रीन पर वेबसाइट को अभी भी पठनीय बनाने के लिए, हमने सामग्री को एक निश्चित चौड़ाई पर बंद कर दिया है, और इसे केंद्रित कर दिया है। इससे मॉनिटर कितना भी बड़ा क्यों न हो, इसे पढ़ना बहुत आसान और सहज बना देगा।

अब जब हम जानते हैं कि हम वेबसाइट को कैसा दिखाना चाहते हैं, तो हम मज़ेदार भाग शुरू करेंगे- HTML और CSS में सब कुछ तैयार करना!

बुनियादी संरचनाओं और शैलियों का निर्माण

एचटीएमएल तत्वों के साथ लेआउट को मैप करें

हमारे द्वारा बनाए गए वायरफ़्रेम से कार्य करते हुए, हम वायरफ़्रेम में मौजूद प्रत्येक अनुभाग के लिए एक HTML तत्व बनाएंगे।

यह <body> . में मार्कअप है जिसकी शुरुआत हम कर रहे हैं:

<!-- Main Content -->
<main>
    Main

    <!-- Header -->
    <header>
        Header
    </header>

    <!-- Hero -->
    <section>
        Hero
    </section>

    <!-- Content -->
    <section>
        Content
    </section>

    <!-- Sidebar -->
    <aside>
        Sidebar
    </aside>
    
    <!-- Footer -->
    <footer>
        Footer
    </footer>

</main>

आप देख सकते हैं कि वायरफ्रेम के प्रत्येक तत्व का अब HTML में संबंधित तत्व कैसे है। और मैंने केवल साधारण प्लेसहोल्डर टेक्स्ट डाला है, कोई वास्तविक सामग्री नहीं।

मूल CSS गुण जोड़ना प्रारंभ करें

आइए अब कुछ सुपर बेसिक सीएसएस में डालें ताकि हम इस लेआउट को अच्छा दिखाना शुरू कर सकें!

main, header, section, aside, footer {
    margin: 0;
    padding: 20px;
    border: 1px solid #000000;
    color: #ffffff;
}

main {
    background: #000000;
}

.header {
    background: #03a9f4;
}

.hero {
    background: #d22b1f;
}

.content {
    background: #129a22;
}

.sidebar {
    border: 1px solid #000000;
    background: #673ab7;
}

.footer {
    border: 1px solid #000000;
    background: #616161;
}

कुछ बहुत ही सामान्य शैलियाँ नहीं दिखाई गई हैं, जैसे कि बॉक्स-साइज़िंग:बॉर्डर-बॉक्स और फ़ॉन्ट शैलियाँ सेट करना। लेकिन इस लेख के प्रयोजनों के लिए, आपको केवल इन्हीं शैलियों के बारे में चिंता करने की आवश्यकता है।

मैं अपने तत्वों में बॉर्डर जोड़ना पसंद करता हूं ताकि यह पहचानना आसान हो सके कि प्रत्येक तत्व कहां है और किसी भी अजीब समस्या का निवारण करें। और मैंने पहले किए गए वायरफ्रेम मॉकअप से मेल खाने के लिए पृष्ठभूमि रंग भी जोड़े हैं।

यदि हम ब्राउज़र में HTML फ़ाइल खोलते हैं, तो हम यही देखेंगे!

फ्लेक्सबॉक्स के साथ एक उत्तरदायी वेबसाइट लेआउट बनाएं (चरण-दर-चरण मार्गदर्शिका)

आपने इसे पहले ही देखा होगा, लेकिन वेबसाइट मोबाइल वायरफ्रेम के समान ही दिखती है। डिफ़ॉल्ट रूप से सब कुछ एक दूसरे के ऊपर स्टैक किया जाता है।

कुछ प्लेसहोल्डर सामग्री जोड़ें

अपने HTML तत्व बनाने के बाद, कुछ प्लेसहोल्डर सामग्री जोड़ना भी एक अच्छा विचार है। यह वेबसाइट को आपके काम पूरा करने के बाद जैसी दिखने लगेगी, वैसी ही दिखेगी।

आपको बहुत अधिक फैंसी होने की ज़रूरत नहीं है- हम बस प्रत्येक तत्व में कुछ लोरेम इप्सम फिलर टेक्स्ट को कॉपी और पेस्ट करने जा रहे हैं। उदाहरण के लिए, हीरो तत्व में क्या है:

<section class="hero">
    Hero
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
    </p>
</section>

लोरेम इप्सम को सभी तत्वों में जोड़ने के बाद, यह वेबसाइट में कैसा दिखेगा:

अच्छा लग रहा है!

आप देखेंगे कि मैंने प्रत्येक तत्व में अलग-अलग लंबाई के प्लेसहोल्डर टेक्स्ट जोड़े हैं, ताकि यह दिखाया जा सके कि अंतिम सामग्री कैसी दिखेगी।

मोबाइल के लिए CSS को ऑप्टिमाइज़ करना

ठीक है, हमने मूल रूप से मोबाइल के लिए लेआउट बनाने का काम पूरा कर लिया है!

मोबाइल पर वेबसाइट को अच्छा दिखाने के लिए एक और युक्ति है कि किनारों के चारों ओर एक समान पैडिंग जोड़ना (और ऊपर और नीचे, यदि आप चाहें)।

यह उपयोगकर्ता के लिए बस थोड़ा सा सांस लेने का कमरा देता है। यदि शून्य पैडिंग और शून्य मार्जिन था, तो सामग्री स्क्रीन के किनारे के ठीक ऊपर होगी, जो तंग महसूस करेगी।

सामग्री को पठनीय रखने के लिए आप बहुत अधिक स्थान नहीं जोड़ना चाहते हैं। इस मामले में मेरे पास 20px की वैश्विक पैडिंग है, लेकिन आप 10px, 15px, या जो कुछ भी आपको सबसे अच्छा लगता है, उसकी पैडिंग जोड़ सकते हैं।

आइए टैबलेट दृश्य के लिए शैलियों को जोड़ने के लिए आगे बढ़ते हैं।

टैबलेट के लिए दो-स्तंभ लेआउट बनाना

यदि हम टैबलेट वायरफ्रेम पर वापस देखें, तो हम देखेंगे कि इसमें सामग्री और साइडबार तत्व साथ-साथ हैं। बाकी सब कुछ मोबाइल की तरह ही लंबवत रूप से स्टैक किया गया है।

हमें कुछ शैलियों को जोड़ने की आवश्यकता है ताकि सामग्री और साइडबार को दो स्तंभों में स्वरूपित किया जा सके। हम इसके लिए CSS ग्रिड के विपरीत flexbox का उपयोग करेंगे।

सबसे पहले, हम अपने एचटीएमएल को बदलने जा रहे हैं और सामग्री और साइडबार तत्वों को एक पैरेंट में लपेटेंगे <div> कि हम "फ्लेक्स-कंटेनर" का एक वर्ग देंगे। (अतिरिक्त मार्कअप के लिए दीर्घवृत्त का उपयोग करना जो अभी वास्तव में महत्वपूर्ण नहीं है)

<div class="flex-container">

   <!-- Content -->
   <section class="content">
      Content
      ... 
   </section>

   <!-- Sidebar -->
   <aside class="sidebar">
      Sidebar 
      ...
   </aside>

</div>

इससे पहले कि हम अपना CSS लिखें, हमें यह तय करने की आवश्यकता है कि जब हम दो-स्तंभ लेआउट में हों तो हम सामग्री और साइडबार को कैसे व्यवहार करना चाहते हैं। कुछ अलग विकल्प हैं, और फिर से "सही" उत्तर आपकी अपनी स्थिति पर निर्भर है।

मैं चाहता हूं कि साइडबार हमेशा 300px चौड़ा हो, और सामग्री शेष स्थान पर कब्जा कर ले।

ऐसा करने के लिए, हम CSS में अपनी फ्लेक्सबॉक्स शैलियों को जोड़ेंगे (अतिरिक्त कोड के स्थान पर खड़े होने के लिए फिर से दीर्घवृत्त का उपयोग करके):

@media screen and (min-width: 640px){
    .flex-container {
        display: flex;
    }    
}

मीडिया क्वेरी का उपयोग करते हुए, जब डिवाइस की चौड़ाई 640px और उससे अधिक होगी, तो हम flexbox चालू कर देंगे। यानी फोन पर छोटी चौड़ाई पर यह स्टैक्ड रहेगा। एक बार जब यह 640 अंक तक पहुंच जाता है तो यह फ्लेक्सबॉक्स लेआउट पर स्विच हो जाएगा।

.content {
    flex: 1;
    ...
}

.sidebar {
    flex: 0 1 300px;
    ...
}

सामग्री और साइडबार तत्वों के लिए, हमने फ्लेक्स गुण जोड़ा है।

हम चाहते हैं कि सामग्री की चौड़ाई की गणना फ्लेक्सबॉक्स द्वारा की जाए, इसलिए हम इसे flex: 1 पर सेट करेंगे। , जो flex-grow: 1 . के लिए शॉर्टहैंड है , flex-shrink: 1 , और flex-basis: 0% ।

यह "डिफ़ॉल्ट" फ्लेक्सबॉक्स सेटिंग है- यदि आप सभी चाइल्ड तत्वों को flex: 1 पर सेट करते हैं , उनकी चौड़ाई की गणना की जाएगी और यथासंभव समान रूप से वितरित की जाएगी।

साइडबार पर, इसकी चौड़ाई को 300px पर सेट करने के लिए, हम flex: 0 1 300px का उपयोग करेंगे। . CSS-ट्रिक्स के अनुसार, वह अंतिम गुण, flex-base, "शेष स्थान वितरित होने से पहले किसी तत्व के डिफ़ॉल्ट आकार को परिभाषित करता है।"

यह सुनिश्चित करेगा कि साइडबार हमेशा 300px का होगा, और शेष स्थान सामग्री अनुभाग में वितरित किया जाएगा।

ये रहा उसका परिणाम!

आइए अब डेस्कटॉप के लिए अपनी शैलियों को जोड़ें।

डेस्कटॉप के लिए सामग्री की चौड़ाई कैप करें

अगर हम टैबलेट और डेस्कटॉप वायरफ्रेम को देखें, तो वे काफी समान दिखते हैं। दोनों में साइडबार के बगल में सामग्री है।

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

सीएसएस में सहायक कक्षाएं

चूंकि हमें कई तत्वों के लिए शैलियों के इस सेट की आवश्यकता होगी, आइए एक सहायक वर्ग बनाएं जो आसानी से पुन:प्रयोज्य हो।

हम अपने सीएसएस में अपनी नई क्लास और उससे जुड़ी शैलियों को इस तरह जोड़ेंगे:

.wrapper {
    margin: auto;
    max-width: 75rem;
}

यह तत्व की अधिकतम-चौड़ाई को 1200px (रेम इकाइयों में परिवर्तित) पर सेट करेगा, और इसे 1200px से बड़ी चौड़ाई पर भी केंद्रित करेगा।

HTML में हम रैपर क्लास को फ्लेक्स-कंटेनर रैपर में जोड़ देंगे, क्योंकि हम कंटेंट और साइडबार कंटेनर की चौड़ाई को सीमित करना चाहते हैं।

तब मार्कअप इस तरह दिखेगा:

<div class="flex-container wrapper">
   …
</div>

और अगर हम वेबसाइट को अधिक चौड़ाई में देखते हैं, तो हम देख सकते हैं कि कंटेंट/साइडबार रैपर के आसपास अतिरिक्त जगह है, ठीक वैसे ही जैसे हम चाहते थे

निष्कर्ष में

तो आपके पास यह है- हमने एक सरल प्रतिक्रियाशील लेआउट बनाया है जो मोबाइल, टैबलेट और डेस्कटॉप पर अच्छा दिखता है!

यदि आप वेबसाइट को कार्य करते हुए देखना चाहते हैं, तो आप यहां एक डेमो देख सकते हैं।

और आप इस प्रोजेक्ट के लिए मेरे GitHub यहाँ से सभी कोड डाउनलोड कर सकते हैं।

*नोट:परियोजना गल्प और सैस का उपयोग करती है। अगर आपको गल्प को स्थापित करने में मदद चाहिए, तो यहां मेरा सरल गल्प ट्यूटोरियल देखें।

पढ़ने के लिए धन्यवाद! मुझे बताएं कि आप नीचे दिए गए टिप्पणियों में इस ट्यूटोरियल के बारे में क्या सोचते हैं 😊