Verwenden von Flexbox, um Zeilen mit gleicher Höhe zu erhalten, nicht Spalten

Ich bin neu bei der Verwendung von flex in einem Stylesheet.Verwenden von Flexbox, um Zeilen mit gleicher Höhe zu erhalten, nicht Spalten

Ich versuche, zwei Block Level Elemente auf die gleiche Höhe zu zwingen. Hier

ist die Geige: https://jsfiddle.net/r9pwzonx/

.flex { 
    display: flex; 
    flex-direction: column; 
} 
.first { 
    padding: 1em; 
    background: blue; 
    flex: 1; 
} 
.second { 
    padding: 1em; 
    background: red; 
    flex: 1; 
} 

<div class="flex"> 
    <div class="first"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </p> 
    </div> 

    <div class="second"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam minus aliquam assumenda consequuntur, laboriosam ducimus ad quis omnis, molestiae a iure nesciunt voluptate rem libero accusantium, deleniti, porro nemo excepturi?</p> 
    </div> 
</div>

Ich sehe keine Änderung in der Höhe des kleineren Feldes des größeren Feldes die Höhe anzupassen.

Quelle

2016-04-12 JROB

, wenn Sie in 'flex-Richtung flex haben: column' werden die Höhen von gestapelten Elementen nicht gleich sein garantiert. – Jason

Verwenden Sie 'min-height: 0; flex: 1 1 0' (das letztere wird nur für Browser benötigt, die einem alten Standard folgen) und die Höhen werden in der Tat gleich sein ... aber 0. Flexbox funktioniert nicht wie "ändere die Höhe der kleineren Box, um sie an die Höhe anzupassen der größeren Box ". – Oriol

Flexbox bietet in einem Multi-Line-Flex-Container keine Spalten/Zeilen mit gleicher Höhe. Dieses Verhalten ist in der Spezifikation definiert: http://stackoverflow.com/q/36004926/3597276 –

Ich sehe keine Änderung in der Höhe der kleineren Box, um die Höhe der größeren Box zu entsprechen.

Sie, dass mit dieser flex-direction: column in einer Flex-Box nicht tun, weil die Hauptachse, so definierte die Richtung Flex Elemente in den Flex Containern platziert werden. Flexbox ist (neben dem optionalen Wrapping) ein Layout für eine einzelne Richtung. Ein Flex-Container erweitert Elemente, um den verfügbaren freien Speicherplatz zu füllen, oder verkleinert sie, um einen Überlauf zu verhindern.
Wenn Sie Zeile eine feste Höhe geben, glaube ich, dass dies wie erwartet funktionieren sollte. Wenn Sie nicht versuchen, feste Höhe zu verwenden. Es hängt von den Dingen ab, die auf diesen flexboxes innen sind.

CODEPEN WITH LINE-HEIGHT

CODEPEN WITH FIXED-HEIGHT

Quelle

2016-04-12 00:31:14 AVI

Verwenden von Flexbox, um Zeilen mit gleicher Höhe zu erhalten, nicht Spalten

Antwort

Verwandte Themen