Clash Royale CLAN TAG#URR8PPP

Equal height columns with centered content in flexbox

I'd like to have two columns of equal height and their content should be middle aligned, so in the very center of each div.

Problem: 'equal height' and 'middle aligned' seem to exclude themselves, the one doesn't work with the other.

Question: How can I create a row with two columns with different width, equal height and their content centered in the middle of each column?

<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
<div class="row">
<div class="twelve wide purple column">
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</div>
<div class="four wide red column middle aligned">
<div class="row">Forward</div>

</div>
</div>
</div>


http://jsfiddle.net/kjjd66zk/1/

2 Answers
2

The key to this layout is to apply equal heights to the primary flex container.

Then make the flex items nested flex containers, which can center the content of the flex items.

Hence, the top level creates the equal height. The second level does the centering.

(See the note at the bottom for more details.)

Here's an example based on your code structure:

body
height: 300px; /* for demo purposes */
color: white;


flex-container
display: flex; /* primary flex container */
flex-direction: row; /* horizontal alignment of flex items
(default value; can be omitted) */
align-items: stretch; /* will apply equal heights to flex items
(default value; can be omitted) */
height: 100%;


flex-item
display: flex; /* nested flex container */
flex-direction: column; /* vertical alignment of flex items */
justify-content: center; /* center flex items vertically */
align-items: center; /* center flex items horizontally */


flex-item:first-child
flex: 3; /* consume 3x more free space than sibling */
background-color: #a333c8;


flex-item:last-child
flex: 1;
background-color: #db2828;


<flex-container>
<flex-item><!-- also flex container -->
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</flex-item>
<flex-item><!-- also flex container -->
<div>Forward</div>
</flex-item>
</flex-container>

People sometimes consider a flex item and its content to be one element. This is not correct.

The HTML structure of a flex container has three levels:

Therefore, the content inside an item does not represent the item; it represents a separate element.

If the content inside an item is text, it becomes an anonymous element.

From the flexbox spec:

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.

That's why, in the solution above, the flex item becomes a flex container. It enables the use of flex properties on the children of the flex item (the content).

You need to give height to your elements

.height
height: 300px;

.row
height: 100%;

.row > div
height: 100%;



Updated fiddle 1

If you want them to center vertical, update above .row > div rule to this

.row > div

.row > div
height: 100%;
display: flex !important;
flex-direction: column;
justify-content: center;



Updated fiddle 2

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.