2 सवाल: फ्लेक्सबॉक्स लेआउट डेस्कटॉप पर दो कॉलम और मोबाइल पर एक कॉलम के साथ

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

फ्लेक्सबॉक्स प्रश्न के साथ सरल लेआउट:

डेस्कटॉप लेआउट आवश्यकताएँ

  • दो उत्तरदायी कॉलम
  • 30% चौड़ाई
  • के साथ पहला कॉलम
  • दूसरा कॉलम 70% चौड़ाई के साथ

मोबाइल लेआउट आवश्यकताएं

  • एकल उत्तरदायी कॉलम
  • पहली पंक्ति 100% चौड़ाई के साथ (यह डेस्कटॉप पर पहला कॉलम है)
  • 2 पंक्ति 100% चौड़ाई के साथ (यह डेस्कटॉप पर दूसरा स्तंभ है)

मुझे अब तक क्या मिला है:

जब मैं mobile पर टॉगल करता हूं (नीचे दिए गए स्निपेट पर उदाहरण के लिए बटन पर क्लिक करें) मोड मैं फ्लेक्स कंटेनर पर flex-direction: column सेट करता हूं। यह काम करने लगता है।

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}

नोट:

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


प्रश्न

यह कैसे करना है पर एक क्लीनर तरीका है? क्या मुझे flex की flexItems की संपत्ति 100% पर मोबाइल मोड पर सेट करने की आवश्यकता है या क्या मैं उन्हें 0600350991111001010350 पर और 0600350991111001010350 पर 0600350991111001010350 पर प्रेषण कर सकता हूं, क्योंकि 0600350991111001010350 पर 0600350991111001010350 पर और उन्हें 0600350991111001010350 पर सेट करने की जरूरत नहीं है, क्योंकि वे 0600350991111001010350 पर प्रचलित होते हैं।

30%
    
0
  1. मीडिया क्वेरी का उपयोग करके 70% पर स्विच करने का यह एक अच्छा तरीका है इसे संभालने का मुझे लगता है ...
    2019-05-08 16: 37: 41Z
  2. धन्यवाद! हालाँकि मैं मीडिया के प्रश्नों का उपयोग नहीं कर रहा हूँ। लेकिन मेरा सवाल प्रति लेआउट लेआउट फ्लेक्सबॉक्स सीएसएस गुणों के बारे में है (जैसे, कि कैसे प्राप्त करने के लिए उचित तरीके से फ्लेक्स गुणों को सेट करें)। इसके बावजूद कि मैं मोबाइल से डेस्कटॉप पर टॉगल कैसे लागू कर रहा हूं।
    2019-05-08 17: 00: 40Z
  3. मीडिया प्रश्न सीधे होंगे ... यहाँ एक समाधान है फ्लेक्सबॉक्स लपेटकर एक मोबाइल ब्रेकपॉइंट के संबंध में 0600350991100101035062 का उपयोग कर "https://codepen.io/anon/pen/MRNoZz" rel = "nofollow noreferrer"> codepen.io/anon/pen/MRNoZz
    2019-05-08 17: 28: 25Z
    2 उत्तर                              2                         

    चूंकि आपके पास मोबाइल से डेस्कटॉप तक कॉलम का कोई अजीब स्विच नहीं है, इसलिए मैं यह करूँगा (और मेरा मानना ​​है कि यह सबसे साफ तरीका है)

    पहले मोबाइल सोचना शुरू करें (मोबाइल सबसे पहले आईएस सबसे अच्छा अभ्यास) और फिर डेस्कटॉप संस्करण के लिए मीडिया क्वेरी का उपयोग करें। मूल रूप से अपने कंटेनर को ब्लॉक प्रदर्शित करने के लिए सेट करें और इसके अंदर दोनों कॉलम की चौड़ाई को 100% पर सेट करें। फिर डेस्कटॉप पर, अपने कंटेनर को एक क्वेरी के साथ फ्लेक्स बनाएं।

    सीएसएस:

    flex-direction

    या जैसा कि मैं इसे SCSS में करूंगा:

    column     
    1
    2019-05-08 17: 20: 47Z
    1. धन्यवाद! और आप flexItems के अनुपात के बारे में क्या करेंगे? मुझे पहला कॉलम 30% और दूसरा 70% होना चाहिए।
      2019-05-08 17: 25: 07Z
    2. @ cbdev420 हे। मुझे लगता है कि इस मामले में आपको इस 2019-05-09 12: 03: 48Z

      आप स्टाइल घटकों के साथ एक विराम बिंदु का उपयोग कर सकते हैं।

      https://www.w3schools.com/css/css_rwd_mediaqueries.asp

      https://www.styled-compenders.com/docs/basics

          
      0
      2019-05-08 17: 15: 47Z
      function App() {
       
        const [mobile,setMobile] = React.useState(false);
          
        return(
        <React.Fragment>
          <div id="flexContainer" style={mobile ? {flexDirection: 'column'} : null}>
            <div id="flexItem1">Item 1</div>
            <div id="flexItem2">Item 2</div>
          </div>
          <button onClick={()=>setMobile(prevState=>!prevState)}>Toogle</button>
        </React.Fragment>
        );
      }
      
      
      ReactDOM.render(<App/>, document.getElementById('root'));
      #flexContainer {
        display: flex;
      }
      
      #flexItem1 {
        background-color: lightblue;
        flex: 30%;
      }
      
      #flexItem2 {
        flex: 70%;
        background-color: lightgreen;
      }
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
      
      <div id="root"></div>
स्रोत रखा गया यहाँ