Set Höhe von CSS-flex-Elemente auf die gleiche Höhe?

Ich habe 2 divs nebeneinander, die ich vertikal zentrieren und horizontal mit flex und justify-content/align-items.

Beispiel
HTML:

<div class="inner">
    <div class="section green">
        <img src="http://i.imgur.com/hEOMgVf.png">
    </div>
    <div class="section red">
         <img src="http://i.imgur.com/nEybO1g.png">
    </div>
</div>

CSS:

.inner {
    float: left;
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #343434;
    text-align: center;
}
.section {
    float: left;
    flex: 1;
}

.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }

Mein Problem ist, dass ich brauche, um die Größe der beiden 'section' divs auf der gleichen sowie zentrieren Sie Sie vertikal und horizontal. Sie sehen in der JSFiddle unten, der grüne hintergrund ist nicht die gleiche Höhe wie die rot. Wie kann ich beide divs die volle Höhe der div-container?

Hier ist eine vereinfachte JSFiddle, was ich habe:
http://jsfiddle.net/beK28/1/

Wie über die Einstellung der Bilder' Höhe? jsfiddle.net/YGTry

InformationsquelleAutor user3420034 | 2014-03-26

  1. 6

    Um den Effekt zu erzielen den Sie möchten, sollten Sie nicht versuchen, einen von der Ausrichtung im container-element und stattdessen sollte .section auch display:flex. Dann rechtfertigen Sie können und zentrieren Sie die Bilder korrekt in der Kinder-Elemente.

    .section {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content:center;
    text-align: center;
}

    http://jsfiddle.net/beK28/8/

    Du auch nicht benutzen, "float", das ist der springende Punkt bei der Verwendung von flexiblen Behältern.

    InformationsquelleAutor skyline3000

  2. 5

    Ihre Elemente sind nicht stretching vertikal mehr, weil du eingestellt hast align-items: center. Wenn Sie wollen, dass Sie gleiche Höhe haben, es muss der Standardwert der Strecke. Wenn sich Ihre Elemente waren multi-line haben, dann könnten Sie align-content: center statt, die Ihnen die Wirkung, die Sie suchen. Für single-line-flex-Elemente, es nicht erscheinen, dass man die vertikale Zentrierung + gleicher Höhe durch Flexbox allein.

    http://jsfiddle.net/beK28/6/

    .inner {
    float: left;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    background-color: #343434;
    text-align: center;
    height: 500px;
}

    Beachten Sie jedoch, dass Sie kann haben flex-Elemente mit dem display-Eigenschaft table-cell.

    http://jsfiddle.net/beK28/7/

    .inner {
    float: left;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #343434;
    text-align: center;
    height: 500px;
}
.section {
    display: table-cell;
    flex: 1;
}

    InformationsquelleAutor cimmanon

  3. 0

    Ich habe Probleme mit den Strecken/Zentrierung vor, und am Ende der Formatierung als display: table-cell:

    .inner {
    float: left;
    width: 500px;
    display: table;
    background-color: #343434;
    text-align: center;
}
.section {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

    InformationsquelleAutor agrm

Schreibe einen Kommentar