फ्लेक्स तत्व बच्चे तत्व को अनदेखा करें

Question

क्या एक फ्लेक्स तत्व एक बच्चे तत्व को अनदेखा करना संभव है, तो इसका आकार अन्य तत्वों को प्रभावित नहीं करता है?

उदाहरण के लिए, मेरे पास display: flex के साथ एक रैपर है। इसमें एक हेडर, सामग्री और पाद लेख है।

<div class="wrapper"> 
    <header></header> 
    <article></article> 
    <footer></footer> 
</div> 

मैं चाहता हूं कि रैपर हेडर टैग को अनदेखा कर दे (हेडर विंडो के शीर्ष पर तय किया जाएगा)। लेख flex: 1 पर सेट किया जाएगा, इसलिए यह पृष्ठ के निचले हिस्से में पाद लेख को मजबूर करने के लिए शेष स्थान लेता है। यहां कुछ ऐसे नमूना सीएसएस है:

.wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    padding-top: 50px; /* Accounts for header */ 
} 

header { 
    height: 50px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

article { 
    flex: 1; 
} 

footer { 
    height: 50px; 
} 

मैं जानता हूँ कि मैं सिर्फ आवरण के बाहर हैडर के लिए कदम सकता है, लेकिन मुझे लगता है कि है कि थोड़ा अधिक मुश्किल कर देगा मौजूदा कोड का एक बहुत कुछ है। क्या मैं भी संभव पूछ रहा हूं?

Answer 1

जब आप घोषित करते हैं। display:flex के रूप में। आप स्वचालित रूप से अपने सभी प्रत्यक्ष बाल तत्वों को display:flex-item घोषित करते हैं। आप header { display: block; }

Answer 2

flex-wrap: wrap घोषित करने के साथ अंतर्निहित घोषणा को ओवरराइड कर सकते हैं। फिर अपने शीर्षलेख के लिए, आप शैली flex-basis: 100% जोड़ सकते हैं जो शीर्षलेख के नीचे सबकुछ नीचे मजबूर करेगी।

Answer 3

आप बच्चे के तत्वों पर flex-shrink: 0 का उपयोग कर सकते हैं ताकि उन्हें कंटेनर भरने के लिए सिकुड़ने से बचाया जा सके। और कंटेनर/रैपर पर flex-wrap: wrap का उपयोग करें ताकि आपके बच्चे लपेट जाएंगे।