フレキシボックスのレイアウトは、3つの項目は、1が2列目1右1を左

Question

基本的にdivタグでこれを行い、レイアウトをしたい、これを入れてどのように非常にわからないAの内容が残っている

AB C

正当化され、Bの内容は右寄せされ、Cの内容は左寄せされます。

Flexの基本を理解していますが、これを達成することについて私の心を得ることはできません。推測A、B、Cはdivコンテナとなり、フレックスラップをオンにしてCを2行目にします。

これはあまりあいまいではありません。

Answer 1

section { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
div:nth-child(1) { 
 
    flex: 1 0 45%; 
 
    margin-right: 5px; 
 
} 
 

 
div:nth-child(2) { 
 
    flex: 1 0 45%; 
 
} 
 

 
div:nth-child(3) { 
 
    flex-basis: 100%; 
 
    margin-top: 5px; 
 
} 
 

 
div { 
 
    border: 1px solid gray; 
 
    background-color: lightgray; 
 
    text-align: center; 
 
}

<section> 
 
    <div>A</div> 
 
    <div>B</div> 
 
    <div>C</div> 
 
</section>