フレックスボックスを2つのフレックスボックスに下に置くにはどうすればいいですか？

Question

私は新しいHTMLのフレックスです。

私の質問はフレックスコンテナに3つのdivがあることです。しかし、必要条件は、3番目のdivが1番目と2番目のdivの下に来るようにすることです。フレックスコンテナはdisplay: flexで使用しています。これらの3つの部門は、同じ列自体に収容されています。

誰かが私を助けてくれますか？これがどうなる

.flex-container-site-footer { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    height: 100px; 
 
    min-width: 100px; 
 
} 
 

 
.One { 
 
    background-color: blue; 
 
    flex-grow: 12; 
 
} 
 

 
.two { 
 
    background-color: yellow; 
 
    flex-grow: 12; 
 
} 
 

 
.three { 
 
    background-color: black; 
 
    flex-grow: 0 
 
}

<div class="flex-container-site-footer"> 
 
    <div class="box One"> 
 
    <p>Box 1</p> 
 
    </div> 
 
    <div class="box two"> 
 
    <p>Box 2</p> 
 
    </div> 
 
    <div class="box three"> 
 
    <p>Box 3</p> 
 
    </div> 
 
</div>

DEMO HERE

Answer 1

。 flex速記は（順番に）のために使用される：

• flex-grow、
• flex-shrink
• flex-basis。

autoprefixを忘れないでください。

.flex-container-site-footer{ 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-container-site-footer > * { 
 
    flex: 0 0 50%; 
 
    max-width: 50%; 
 
} 
 

 
.box{ 
 
    height:100px; 
 
} 
 
.One{ 
 
    background-color: blue; 
 
} 
 

 
.two{ 
 
    background-color: yellow; 
 
} 
 

 
.three{ 
 
    background-color: black; 
 
    flex-basis: 100%; 
 
    max-width: none; 
 
}

<div class="flex-container-site-footer"> 
 
    <div class="box One"> 
 
     <p>Box 1</p> 
 
    </div> 
 
    <div class="box two"> 
 
     <p>Box 2</p> 
 
    </div> 
 
    <div class="box three"> 
 
     <p>Box 3</p> 
 
    </div> 
 
</div>