फ्लेक्सबॉक्स

Question

में प्रथम-बच्चे पूर्ण-चौड़ाई मैं फ्लेक्सबॉक्स पूर्ण-चौड़ाई में पहला बच्चा कैसे सेट कर सकता हूं और अन्य सभी बच्चे flex:1 (विभाजन स्थान के लिए) पर सेट कर सकते हैं?

इस तरह

:

Answer 1

आप 100% की चौड़ाई को :first-child सेट कर सकते हैं, और बच्चे के flex: 1 को :not(:first-child) के बाकी। उन्हें multiplelines पर डाल करने के लिए, कंटेनर पर flex-wrap: wrap का उपयोग करें:

.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
    background: #e2eaf4; 
 
    padding: 10px; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    font-family: "Open Sans", Arial; 
 
    font-size: 20px; 
 
    color: #FFF; 
 
    text-align: center; 
 
    background: #3794fe; 
 
    border-radius: 6px; 
 
    padding: 20px; 
 
    margin: 12px; 
 
} 
 

 
.child:first-child { 
 
    width: 100%; 
 
} 
 

 
.child:not(:first-child) { 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
</div>

Answer 2

अपना पहला आइटम के लिए width: 100%; जोड़ें। और flex: 1; दूसरों के लिए।

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-item:not(:first-child) { 
 
    flex: 1; 
 
} 
 

 
.flex-item:nth-child(1) { 
 
    width: 100%; 
 
} 
 

 
/* Styles just for demo */ 
 
.flex-item { 
 
    background-color: #3794fe; 
 
    margin: 10px; 
 
    color: #fff; 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
}

<div class="flex"> 
 
    <div class="flex-item"> 
 
    Child 
 
    </div> 
 
    <div class="flex-item"> 
 
    Child 
 
    </div> 
 
    <div class="flex-item"> 
 
    Child 
 
    </div> 
 
</div>