Flex-Element am Ende des Behälters ausrichten

Question

Mit flexbox können Sie eine <p> an das "Ende" der Eltern ausrichten?

Gemäß der Dokumentation sollte das Hinzufügen des Elements align-content: flex-end zum übergeordneten Element ausreichen. Im folgenden Beispiel funktioniert das jedoch nicht.

Beispiel:

Hier ist ein einfaches div ein p Element enthält.

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-content: flex-end; /* This should do the alignment, but doesn't. */ 
 
    background: yellow; 
 
    padding: 50px; 
 
    height: 300px; 
 
    width: 400px; 
 
}

<div> 
 
    <p>Align me to the end.</p> 
 
</div>

jsFiddle

A hacky Lösung wäre, ein ::before das Kind hinzuzufügen, mit flex: 1, aber ich bin neugierig, ob es eine bessere Lösung ist.

Answer 1

Die Eigenschaft align-content funktioniert nur, wenn mehrere Zeilen von Flex-Elementen in einem Container vorhanden sind. Diese Eigenschaft soll den Abstand zwischen den Zeilen verteilen.

Da es in Ihrem Container nur eine Zeile gibt, hat align-content keine Auswirkung.

Verwenden Sie align-items in einem einzeiligen Container.

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end;  /* changed from align-content */ 
 
    justify-content: flex-end; /* optional */ 
 
    background: yellow; 
 
    padding: 50px; 
 
    width: 400px; 
 
    height: 300px; 
 
}

<div> 
 
    <p> 
 
    Align me in the bottom left corner. 
 
    </p> 
 
</div>

revised fiddle

8.4. Packing Flex Lines: the align-content property

Die align-content Eigenschaft einer Flex-Containers Linien innerhalb richtet den Flex Behälters, wenn besonders viel Platz es in der Querachse ist, ähnlich wie justify-content richtet einzelne Elemente innerhalb der Hauptachse aus.

Beachten Sie, dass diese Eigenschaft keinen Einfluss auf einen Single-Line-Flex-Container hat.

Nur mehrzeilige Flex-Container haben jemals freien Platz in der Querachse für Linien, um ausgerichtet zu werden, weil in einem einzeiligen Flex-Container die einzige Linie automatisch ausdehnt, um den Raum zu füllen.