コードをflexboxに変換します.2つのdivを整列します

Question

私はこれを生成するコードを持っていますが、私の現在のコードはかなり乱雑ですので、代わりにFlexboxを使用したいと思います。どうすればいい？

.container { 
 
    background: red; 
 
    padding: 10px; 
 
} 
 

 
.container2 { 
 
    background: green; 
 
    padding: 10px; 
 
} 
 

 
.left { 
 
    float: left; 
 
    padding: 10px; 
 
    padding-top: 0px; 
 
    width: 48%; 
 
    background: #fff; 
 
} 
 

 
.right { 
 
    float: right; 
 
    padding: 10px; 
 
    padding-top: 0px; 
 
    width: 40%; 
 
    background: #fff; 
 
} 
 

 
.red { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="container2"> 
 
    <div class="left"> 
 
     <p>Hello</p> 
 
    </div> 
 
    <div class="right"> 
 
     <p>Hello</p> 
 
    </div> 
 
    <div style="clear: both;"> 
 
    </div> 
 
    <button class="red"> 
 
    </div> 
 
</div>

JsFiddle：https://jsfiddle.net/19e8nmr3/

Answer 1

あなたは1つの親要素でp要素をラップし、flex: 1を使用することができます。

.container { 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.container2 { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: green; 
 
} 
 
.wrap { 
 
    display: flex; 
 
} 
 
.wrap p, 
 
button { 
 
    padding: 10px; 
 
    background: #fff; 
 
    flex: 1; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <div class="container2"> 
 
    <div class="wrap"> 
 
     <p>Hello</p> 
 
     <p>Hello</p> 
 
    </div> 
 
    <button class="red">Button</button> 
 
    </div> 
 
</div>