フレックスボックスでの最初の子の全角

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>