Flexbox-Container

Question

Ich möchte einen Flex-Container erstellen, der 3 untergeordnete Elemente enthält. Ich möchte jedoch, dass zwei der untergeordneten Elemente Spalten sind und dass das dritte eine Zeile ist, die unter den Spalten (wie einer Fußzeile) ausgeführt wird. Ist es möglich?

Answer 1

Dies wird wahrscheinlich durch die Verwendung von zwei divs am besten dadurch erreicht, eine Flex-Box, und eine, die nicht ist: siehe unten:

#wrapper { 
 
    display: flex; 
 
    background-color: lightblue; 
 
} 
 
#a { 
 
background-color: lightgreen; 
 
} 
 
#b { 
 
background-color: lightgray; 
 
} 
 
#c { 
 
background-color: lightyellow; 
 
}

<div id="wrapper"> 
 
    <div id="a">This is a</div> 
 
    <div id="b">This is b</div> 
 
</div> 
 
<div id="c">This is c</div>

Answer 2

Sie können wie THIS

etwas tun

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.col-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.col { 
 
    margin: 10px; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: blue; 
 
} 
 

 
.row { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div class="col-container"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    </div> 
 
    <div class="row"></div> 
 
</div>