css flexプロパティを使用してコンテナの幅を固定する方法

Question

3つのコンテナがあります。タブレットポートレートモードでは、以下の仕様でコンテナの幅を調整する必要があります。

1. コンテナ1と3は、1列にして、親コンテナのフレックスコンテナの中心に合わせる必要があります。各容器1,3の幅はそれぞれ260pxでなければなりません。
2. コンテナ2はコンテナ1とコンテナ3の下にあり、このコンテナの幅はコンテナ1と3の合計幅に等しくなければなりません。

私は最終的な解決コードを特定のメディアクエリの中に配置します。私は、容器の幅が上記の点を満たすべき解決策を探しています。

これは私が試したものです：

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

 
.flexcontainer > div { 
 
    flex: 1 0 260px; 
 
    background-color: #e46119; 
 
    border: 1px solid #626262; 
 
    margin: 3px; 
 
} 
 

 
.flex:nth-child(2) { 
 
    order: 1; 
 
    flex: 1 0 520px; 
 
}

<div class="flexcontainer"> 
 
    <div class="flex"> 1 </div> 
 
    <div class="flex"> 2 </div> 
 
    <div class="flex"> 3 </div> 
 
</div>

Answer 1

あなたはand 3 to 50％and container 2 to 100％ `

のフレックス基礎を設定し、その後 520pxに親の外側の幅を設定することができます

* {box-sizing: border-box;} 
 

 
.flexcontainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 520px; 
 
    margin: auto; 
 
} 
 

 
.flexcontainer > div { 
 
    flex: 0 0 50%; 
 
    background-color: #e46119; 
 
    border: 1px solid #626262; 
 
} 
 

 
.flex:nth-child(2) { 
 
    order: 1; 
 
    flex: 0 0 100%; 
 
}

<div class="flexcontainer"> 
 
    <div class="flex"> 1 </div> 
 
    <div class="flex"> 2 </div> 
 
    <div class="flex"> 3 </div> 
 
</div>