CODEWITHSUNDEEP
cssflexbox
Stephen
Stephen

Reputation: 8168

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)

Upvotes: 51

Views: 78516

Answers (4)

GN.
GN.

Reputation: 9819

  .item-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .item {
    width: 400px;
    display: flex;
  }

Upvotes: 4

Ben
Ben

Reputation: 57209

.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>

Upvotes: 71

Ali Klein
Ali Klein

Reputation: 1908

If you set flex: 1 on the child, it will stretch to fill the space.

Then you can align-items: center on the child container.

.container {
  display: flex;
}

.item {
  flex: 1;
  display: flex;
  align-items: center;
  width: 200px;
  background-color: cadetblue;
  color: white;
  padding: 1rem;
  margin: 1rem;
}

.content {
  padding: 1rem;
  border: 2px solid lightcoral;
}
    <div class="container">
        <div class="item">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Pulvinar neque laoreet suspendisse interdum consectetur libero.
                Diam sit amet nisl suscipit adipiscing bibendum est.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Duis tristique sollicitudin nibh sit amet. Platea dictumst
                vestibulum rhoncus est pellentesque.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Aliquam vestibulum morbi blandit cursus
            </div>
        </div>
    </div>

Upvotes: 1

cimmanon
cimmanon

Reputation: 68319

There is no reason to do this with Flexbox. The table/table-cell properties have been able to do this for a long time:

http://cssdeck.com/labs/qsirepkh

ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

This is what it looks like with Flexbox:

http://codepen.io/cimmanon/pen/BfDAk

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

Upvotes: -8

Related Questions