Search code examples
cssflexbox

How to vertically align and stretch content using CSS flexbox

Using CSS flexbox, how can I simultaneously vertically center the content of all divs in a row while keeping the same height on all of them without using the css height attribute?

HTML

<!DOCTYPE html>
<html>
  <body>
    <div class="Grid">
      <div class="Grid-cell">
        1<br>
        1<br>
        1<br>
        1<br>
      </div>
      <div class="Grid-cell">2</div>
      <div class="Grid-cell">
        3<br>
        3<br>
      </div>
    </div>
  </body>
</html>

CSS:

.Grid {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.Grid-cell {
  flex: 1;
  text-align: center;
}

(see http://jsbin.com/efaCEVa/1/edit)

Solution 

  • .outer {
  align-items: stretch;
  display: flex;
}

.inner {
  align-items: center;
  display: flex;
}
    <div class='outer'>
  <div class='inner'>A</div>
  <div class='inner'>B</div>
  <div class='inner'>C</div>
</div>