CODEWITHSUNDEEP
htmlcsscenterflexbox
user3420034
user3420034

Reputation:

Set height of CSS flex elements to the same amount?

I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.

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

My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?

Here's a simplified JSFiddle of what I have: http://jsfiddle.net/beK28/1/

Upvotes: 6

Views: 32543

Answers (3)

skyline3000
skyline3000

Reputation: 7913

To achieve the effect you want, you shouldn't try to do any of the alignment in the container element and instead should set .section to also be display:flex. Then you can justify and center the images correctly within the children elements.

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

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

You also don't need to use float, that's the whole point of using flexible containers.

Upvotes: 6

cimmanon
cimmanon

Reputation: 68339

Your elements aren't stretching vertically anymore because you've set align-items: center. If you want them to be equal height, it has to be the default value of stretch. If your elements were multi-line, then you could use align-content: center instead, which will give you the effect you're looking for. For single-line flex items, it does not appear that you can have vertical centering + equal height through Flexbox alone.

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

Note, however, that you can have flex items with the display property of 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;
}

Upvotes: 5

agrm
agrm

Reputation: 3852

I've had problems with stretch/centering before, and ended up formatting as 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;
}

Upvotes: 0

Related Questions