Columns of equal height with centered content in flexbox

Question

I would like to have two columns of the same height, and their contents should be centered, so in the very center of each div.

Problem: "equal height" and "average alignment" seem to exclude themselves; one does not work with the other.

Question: How to create a row with two columns with different widths, equal heights and their contents centered in the center 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/

Answer 1

The key to this layout is applying equal heights to the main flex container.

Then create the flex items of nested flex containers that can center the content of flex items.

Therefore, the upper level creates equal height. The second level does centering.

(For more details see the note below).

Here is 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> 

jsFiddle demo

---

People sometimes consider the element of flexibility, and its contents - one of the elements. This is not true.

The HTML structure of a flexible container has three levels:

• container
• element
• content

Therefore, the content inside the element does not represent the element; it is a separate element.

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

From the flexbox specification:

4. Flex items

Each child stream of a flexible container becomes a flexible element, and each continuous run of text that is directly contained within the flex container is wrapped in an anonymous flexibility element.

That is why in the above solution, the flexible element becomes a flexible container. This allows you to use flex properties for children of a flexible element (content).

Answer 2

You need to specify a height for your elements.

 .height { height: 300px; } .row { height: 100%; } .row > div { height: 100%; } 

Updated script 1

If you want them to be centered vertically, update the rule above .row > div for this

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

Updated fiddle 2