Flexelemente an Flex-Ende ausrichten

Question

Hei,

Ich erstelle Rasterlayout und wenn ich versuche, Elemente auf Flex-Ende oder Start auszurichten, wird Höhe/Breite Null. Was ich frage mich ist, ist es möglich, Elemente im Flex-Container auf die Oberseite/unten/Mitte OHNE Angabe von Höhe/Breite ausrichten? In meinem Fall habe ich keine Höhe angegeben und es funktioniert nicht. Wenn ich es spezifiziere, funktioniert es. Zeile, die nicht funktioniert, ist im ersten Beispiel kommentiert.

Hier Code:

.flex-container { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    //align-items: flex-start; 
 
} 
 

 
.flex-item { 
 
    background: blue; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
} 
 

 
.flex-container2 { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    align-items: flex-end; 
 
} 
 

 
.flex-item2 { 
 
    background: blue; 
 
    height: 50px; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
</div> 
 

 
<br> 
 

 
<div class="flex-container2"> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
</div>

Answer 1

Da der Standardwert für align-Elemente stretch, daher füllen sie ihre Eltern Höhe, und Sie können es ändern, um flex-start/flex-end, die Zeile Flex-Elemente werden 0 hoch und benötigen Inhalt (oder eine Höhe/Min-Höhe), damit Sie sie tatsächlich sehen können.

.flex-container { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    align-items: flex-start; 
 
} 
 

 
.flex-item { 
 
    background: blue; 
 
    min-height: 20px; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
} 
 
.flex-item:nth-child(even) { 
 
    align-self: flex-end; 
 
} 
 

 
.flex-container2 { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    align-items: flex-end; 
 
} 
 

 
.flex-item2 { 
 
    background: blue; 
 
    height: 50px; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">They need content or a height/min-height</div> 
 
    <div class="flex-item">They need content or a height/min-height</div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
</div> 
 

 
<br> 
 

 
<div class="flex-container2"> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
</div>