フレックスの列の上にdivを表示するにはどうすればいいですか？

Question

フレックスとして表示されるdivがあります。 div内には3つの要素があります。私は最初の要素が100％の幅を持ち、2番目と3番目の要素が互いに隣り合っていなければなりません。

サンプルコード：ここ Codepen

#flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
} 
 
#flex-container > .flex-item { 
 
    -webkit-flex: auto; 
 
    flex: auto; 
 
} 
 
#flex-container > .raw-item { 
 
    width: 5rem; 
 
} 
 
#flex-container { 
 
    width: 100%; 
 
    font-family: Consolas, Arial, sans-serif; 
 
} 
 
#flex-container > div { 
 
    border: 1px solid #f00; 
 
    padding: 1rem; 
 
} 
 
#flex-container > .raw-item { 
 
    border: 1px solid #000; 
 
} 
 
.fullwidth { 
 
    background-color: yellow; 
 
}

<div id="flex-container"> 
 
    <div class="fullwidth">full swidth</div> 
 
    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> 
 
    <div class="raw-item" id="raw">Raw box</div> 
 
</div>

私はHTMLを変更することなく、黄色DIV（クラス=全角）が100％であり、他の2つの要素の上にいることを実現したいですフレックスをスキップします。

これを正しく行う方法はありますか？

Answer 1

フレックスコンテナでflex-wrap: wrapを使用し、フル幅で使用したいdivでflex: 0 0 100%を使用できます。また、あなたが使用できる他のdivの等しい幅を作るためにflex: 1

* { 
 
    box-sizing: border-box; 
 
} 
 
#flex-container { 
 
    font-family: Consolas, Arial, sans-serif; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#flex-container > div { 
 
    border: 1px solid #f00; 
 
    padding: 1rem; 
 
    flex: 1; 
 
} 
 
#flex-container > .raw-item { 
 
    border: 1px solid #000; 
 
} 
 
#flex-container > div.fullwidth { 
 
    background-color: yellow; 
 
    flex: 0 0 100%; 
 
}

<div id="flex-container"> 
 
    <div class="fullwidth">full swidth</div> 
 
    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> 
 
    <div class="raw-item" id="raw">Raw box</div> 
 
</div>