Flexbox'da ilk tam boy genişlik

Question

İlk çocuğu tam boy genişlikte ve diğer tüm çocuk flex:1 (bölünmüş alan için) olarak ayarlanmış ilk çocuğa nasıl ayarlayabilirim? Bunun gibi

:

Answer 1

Sen% 100'lük bir genişliğe :first-child ayarlayın ve oğul flex: 1 için :not(:first-child) geri kalanı olabilir. multiplelines onları koymak için, kabın üzerinde flex-wrap: wrap kullanın:

.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

ilk öğe için width: 100%; ekleyin. Ve diğerleri için 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>