인 flexbox 레이아웃, 3 개 항목 1은 두 번째 행에 1 바로 1을 왼쪽

Question

기본적으로 div의와 함께이 작업을 수행 레이아웃을 원하는이를 넣어하는 방법을 확신 아니의 내용이 남아 있습니다

AB C

정당화되고, B의 내용은 오른쪽으로 정당화되고, C의 내용은 왼쪽으로 정당화된다.

Flex의 기본 사항을 이해하고 있지만이를 달성하기 위해 내 마음을 사로 잡을 수는 없습니다. 추측 A, B, C는 div 컨테이너이고, 플렉스 랩이 켜져 C를 두 번째 줄로 가져옵니다.

희망 사항이 너무 애매하지 않기를 바랍니다.

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>