Définir la hauteur de CSS flex éléments pour le même montant?

J'ai 2 divs à côté les uns des autres que j'ai centrer verticalement et horizontalement à l'aide de flex et de justifier-content/aligner-éléments.

Exemple
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; }

Mon problème est que j'ai besoin de régler la hauteur des deux "section" divs à la même, ainsi que le centrage verticalement et horizontalement. Vous pouvez voir dans le JSFiddle ci-dessous que le fond vert n'est pas la même hauteur que le rouge. Comment puis-je faire les deux divs toute la hauteur de la div conteneur?

Ici est simplifié JSFiddle de ce que j'ai:
http://jsfiddle.net/beK28/1/

InformationsquelleAutor user3420034 | 2014-03-26
  1. 6

    Pour obtenir l'effet que vous voulez, vous ne devriez pas essayer de le faire tout de l'alignement dans le conteneur de l'élément et de la place devrait définir .section aussi display:flex. Ensuite, vous pouvez justifier et centre correctement les images à l'intérieur de la enfants des éléments.

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

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

    Vous aussi n'avez pas besoin d'utiliser float, c'est toute la question de l'utilisation des conteneurs souples.

    InformationsquelleAutor skyline3000
  2. 5

    Vos éléments ne sont pas les étirements à la verticale de plus, parce que vous avez mis en align-items: center. Si vous voulez être égale hauteur, il doit être la valeur par défaut de l'étirement. Si vos éléments sont multi-ligne, alors vous pouvez utiliser align-content: center au lieu de cela, ce qui vous donnera l'effet que vous recherchez. Pour une seule ligne flex éléments, il n'apparaît pas que vous pouvez avoir verticale de centrage + hauteur égale à travers Flexbox seul.

    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;
}

    Noter, cependant, que vous peut ont flex éléments avec la propriété display de 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

    J'ai eu des problèmes avec stretch/centrage avant, et a fini de mise en forme que 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