Pierwsza pełnowymiarowa w programie Flexbox

Question

Jak ustawić pierwsze dziecko w pełnej szerokości i wszystkich innych ustawieniach podrzędnych na flex:1 (w przestrzeni podzielonej)?

Jak to:

Answer 1

Można ustawić :first-child o szerokości do 100%, a reszta Childs :not(:first-child) do flex: 1. Aby umieścić je na multiplelines użyć flex-wrap: wrap na pojemniku:

.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

Dodaj width: 100%; dla pierwszej pozycji. I flex: 1; dla innych.

.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>