Базовая компоновка с CSS flexbox

Question

Я разрабатываю базовый макет с использованием flexbox.

Я пробовал следующий код, но он не работает:

<div id="wrapper"> 
    <div id="container"> 
     <div id="div1">1</div> 
     <div id="div2">2</div> 
    </div> 
    <div id="div3"></div 
</div> 

#wrapper {display:flex;flex-direction:row;} 
#div1, #div2 {display:block;} 
#container, #div3 {flex:1}; 

Код может быть изменен по мере необходимости.

Answer 1

Вы можете использовать yor #container в качестве вертикального гибкого контейнера, чтобы вы могли делиться высотой между #div1 и #div2.

#wrapper { 
 
    display: flex; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 
#container, 
 
#div1, 
 
#div2, 
 
#div3 { 
 
    flex: 1 
 
} 
 
#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border-right: 1px solid black; 
 
} 
 
#div2 { 
 
    border-top: 1px solid black; 
 
}

<div id="wrapper"> 
 
    <div id="container"> 
 
     <div id="div1"> div 1</div> 
 
     <div id="div2"> div 2</div> 
 
    </div> 
 
    <div id="div3"> div 3</div 
 
</div>