Can't get element vertical aligned using flexbox

Question

I've spent a couple of hours trying to get the text within my flex elements vertical aligned with no luck. Feels like I'm missing something very important here!

HTML

<div class="flex-container">
    <div class="flex-item">
        test
    </div>                                     
    <div class="flex-item">
        test                                   
    </div>                                   
</div>

CSS

.flex-container {
    height:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch; 
}

.flex-item {
    flex: 1 auto;
}

Do the ancestor elements of `.flex-container` have a defined height? [Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Aug 01 '16 at 15:27
If so, there are differences in browser behavior when rendering flex heights. [Chrome / Safari not filling 100% height of flex parent](http://stackoverflow.com/q/33636796/3597276) — Michael Benjamin, Aug 01 '16 at 15:28

score 1 · Answer 1 · answered Aug 01 '16 at 15:28

display:flex isn't inherited, so you need to apply it to the flex-items too...the use align-items to center the text vertically.

html,
body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}
.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
}
.flex-item {
  flex: 1 auto;
  display: flex;
  align-items: center; /* center vertically */
  justify-content:center; /* center horzontally */
  border: 1px solid grey
}

<div class="flex-container">
  <div class="flex-item">
    test
  </div>
  <div class="flex-item">
    test
  </div>
</div>

score 0 · Answer 2 · answered Aug 01 '16 at 16:29

PROBLEM:

The problem is that your .flex-containter is not reaching your test text, since it is not its child, it is a descendant of the .flex-item.

The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item.

Each flex item is affected by the flex container, but the flex item's descendants are not.

SOLUTION:

You need to add display: flex; to your flex item as well.

JSFIDDLE

CODE SNIPPET:

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
}
.flex-item {
  flex: 1 auto;
  display: flex;
  align-items: center;
  height: 200px;
  background-color: royalblue;
  color: white;
}
.flex-item:nth-of-type(2) {
  background-color: tomato;
}

<div class="flex-container">
  <div class="flex-item">
    test
  </div>
  <div class="flex-item">
    test
  </div>
</div>

Can't get element vertical aligned using flexbox

2 Answers2