Flexbox strecken zwei Spalten mit ungleicher Anzahl von Elementen in, gleichermaßen, in einem Container

Question

Ich habe zwei Spalten in einer Zeile enthalten. In Spalte A habe ich drei Elemente. In Spalte B habe ich 4 Gegenstände.

Ich möchte, dass beide Spalten gleich groß sind, wobei die Elemente gleichmäßig in den Spalten verteilt sind.

Ich habe versucht, align-content: stretch; auf .col aber tut es nicht.

header{ 
 
\t background-attachment: fixed; 
 
\t background-position: center; 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.flex-container { 
 
    border: 10px solid purple; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.row { 
 
    width: auto; 
 
    border: 5px solid blue; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.col { 
 
    width: auto; 
 
    height: auto; 
 
    margin: 10px; 
 
    border: 2.5px solid tomato; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-content: stretch; 
 
    justify-content: center; 
 
} 
 
.flex-item { 
 
    background-color: green; 
 
    padding: 5px; 
 
    width: auto; 
 
    height: auto; 
 
    margin: 10px; 
 
    line-height: 10px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
}

<div class="flex-container"> 
 
<!-- Row a --> 
 
\t <div class="row"> 
 
<!-- Col L --> 
 
\t \t <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t </div> 
 
<!-- /Col L --> 
 
<!-- Col R --> 
 
\t \t <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t </div> 
 
<!-- /Col R --> 
 
\t </div> 
 
<!-- /Row a --> 
 
</div>

Answer 1

die align-items: center auf der .row kommentiert und änderte die justify-content Eigenschaft auf dem .col auf den Wert von space-between:

header{ 
 
\t background-attachment: fixed; 
 
\t background-position: center; 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.flex-container { 
 
    border: 10px solid purple; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.row { 
 
    width: auto; 
 
    border: 5px solid blue; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    /*align-items: center;/the default value of the align-items property is stretch, which is exactly what you want */ 
 
    justify-content: center; 
 
} 
 
.col { 
 
    width: auto; 
 
    height: auto; 
 
    margin: 10px; 
 
    border: 2.5px solid tomato; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-content: stretch; 
 
    justify-content: space-between; /* modified/items are now evenly distributed */ 
 
} 
 
.flex-item { 
 
    background-color: green; 
 
    padding: 5px; 
 
    width: auto; 
 
    height: auto; 
 
    margin: 10px; 
 
    line-height: 10px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
}

<div class="flex-container"> 
 
<!-- Row a --> 
 
\t <div class="row"> 
 
<!-- Col L --> 
 
\t \t <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t </div> 
 
<!-- /Col L --> 
 
<!-- Col R --> 
 
\t \t <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t \t <div class="flex-item text-center"><p>A</p></div> 
 
\t \t </div> 
 
<!-- /Col R --> 
 
\t </div> 
 
<!-- /Row a --> 
 
</div>