Is it possible to mix rows and columns with flexbox?

Question

In other words, is it possible to achieve this?

Note: This is the best I could get:

Answer 1

You can achieve the layout with a few nested flexboxes. Here's the result of the code below:

html, body, .container {
    height: 100%;
    background-color: white;
}

.container {
    display: flex;
    flex-direction: column;       
    /* flex-wrap: wrap; */
}

.container div {                   
    margin: 10px;
    flex: 1;
    background-color: orange;
}

.container > div:first-child { }

.container > div:nth-child(2) {
    display: flex;
    background-color: white;
}

.container > div:nth-child(2) > div:first-child {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-right: 20px;
}

.container > div:nth-child(2) div {
    flex: 1;
    margin: 0;
}

.container > div:nth-child(2) > div:first-child > div:first-child {
    margin-bottom: 20px;
}

.container > div:last-child { }

                

    
Div 1
                   
    
    
                              
    
        
                          
        
            
Div 2.1.1
       
            
            
Div 2.1.2
       

        
                         
        
        
Div 2.2
             
        
    
                             
    
  
Div 3
                     
  
                                 

jsFiddle