Make Flex Items Stretch Full Height and Vertically Center Their Content

Make flex items stretch full height and vertically center their content

Unfortunately, it is impossible to achieve the desired effect while using the exact markup posted in the question.

The solution involves:

• Setting display: flex; on <li>.
• Wrapping the <li> contents into another element.
  
  
  • This is required because <li> is now a flex container, so we need another element to prevent the actual contents from becoming flex items.
  • In this solution, I introduced a <div> element, but it could have been other element.
• Now that <li> is a flex container and it contains only a single child, we can use align-items and/or justify-content to align this new and only child.

The DOM tree looks like this:

<ul> flex-parent, direction=row
 ├ <li> flex-item && flex-parent && background && JavaScript clickable area
 │  └ <div> flex-item as a single transparent element
 │     ├ Actual contents
 │     └ Actual contents
 ├ …

Note: The solution in this answer uses 2 nested flex boxes. The solution by Michael_B uses 3 nested flex boxes, because it has the added challenge of expanding the <a> element to fill the entire <li>. Which one is preferred depends on each case. If I could, I would accept both answers.

/* New code: this is the solution. */ul > li {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}
/* Old code below. */ul {  display: flex;  flex-direction: row;  align-items: stretch;}ul > li {  flex-grow: 1;  flex-shrink: 0;  flex-basis: 5em;  text-align: center;}ul > li:nth-child(2) {  background: #CFC;}
/* Visual styles, just ignore. */html, body { font-family: sans-serif; font-size: 25px; }ul, li { list-style: none; margin: 0; padding: 0; }ul { background: #CCF; width: 25em; }
button:focus + ul {    font-size: 14px;    width: auto;}

<button>Click here to set <code>width: auto</code> and reduce the font size.</button>
<!-- New code: there is a single <div> between each <li> and their contents. --><ul>  <li><div>Sample</div></li>  <li><div><span>span</span></div></li>  <li><div><span>multiple</span> <span>span</span></div></li>  <li><div>text <span>span</span></div></li>  <li><div>multi<br>line</div></li></ul>

Getting flex items to stretch and vertically center content at the same time?

You can make the parent flex and that will put the children in columns in the row, stretched by default. Then you can make the children flex, too, and use align-items: center to center their contents. Depending on what's actually in the content in each column, you might want to wrap the content in an element like a div so that the div is centered and the content inside of it is treated normally.

.u-flex, .u-flex > div {display: flex;}
.u-flex > div {align-items: center;}

<div class="u-flex u-height-4rem u-flex-align-items-center">  <div class="u-width-25rem u-padding-left-3rem u-padding-right-3rem" style="background:red">u-background-color-gray-{{weight}}<br>foo<br>bar<br>foo<br>bar</div>  <div class="u-background-color-gray-{{weight}} u-width-100" style="background:grey">asdf<br>asdf<br>asdfasdf<br>asdf<br>asdfasdf<br>asdf<br>asdfasdf<br>asdf<br>asdf</div></div>

CSS flex box - how to make items center vertically with a full height background

You need to make the following changes in order to align the items to the center of your .quote container:

• First, remove the padding-top:4.5em from your .words CSS otherwise the Y-offset will be shifted down.

• Second, change the display of .quote to flex and then use align-items property to vertically align the .word container in the middle of your .quote container. (display:flex; align-items:center;) in .quote

.feature-content {  align-items: stretch;  align-content: stretch;  display: flex;  padding-top: .35em;}
.feature-visual {  flex-grow: 1;  flex-basis: 65%;}
.quote {  align-self: stretch;  background: #db6f72;  color: #FFF;  flex-basis: 35%;  flex-grow: 1;  position: relative;  display:flex;  align-items: center;}
.words {  font-family: "Georgia", serif;  padding-left:2em;  font-size: 2em;  font-style: italic;  line-height: 1.5;  width: 80%;}

<div class="feature-content">  <div class="feature-visual">    <div class="embed-container">      <iframe src="https://player.vimeo.com/video/214852366?controls=0&hd=1&autohide=1" title="Factory Pattern & REHAU" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="312" frameborder="0"></iframe>    </div>  </div>  <div class="quote">    <div class="words">Improved our conversion rates to a level that far surpassed expectation.    </div>  </div>

How to vertically center the contents of a flexbox item

It can be achieved by displaying each flex item as a flex container and then aligning the contents vertically by align-items property, as follows:

.flex-container {  display:flex;  align-items:center;  height: 200px; /* for demo */}
.flex-item {  align-self:stretch;  display:flex;  align-items:center;  background-color: gold; /* for demo */}

<div class="flex-container">    <div class="flex-item">      I want to be vertically centered!      <s>But I'm not.</s>  </div></div>

How to vertically align the content inside flex items?

You can use webkit-align-items to m

-webkit-align-items:flex-end;  

http://jsfiddle.net/5N2km/1/

Stretch height with flexbox align-items center

You need to make row-items a flex box and apply align-items: center; to them

This is the code that you should add

.row1 .row-item {
  display: flex;
  align-items: center;
}

See result below :

.row {  display: flex;  flex-direction: row;  width: 100%;  height: 100px;  background: beige;  border: 1px solid red;  margin: 10px 0;}
.row2 {  align-items: center;}
.row-item {  border: 1px solid green;}
.row1 .row-item {  display: flex;  flex-wrap: wrap;}
.row1 .row-item div {  width: 100%;  border: 1px solid blue;  display: flex;  align-items: center;}
.item1,.item3 {  width: 100px;}
.item2 {  flex: 1;}

<div class="row row1">  <div class="row-item item1">1</div>  <div class="row-item item2">    <div> 2.1 </div>    <div> 2.2 </div>  </div>  <div class="row-item item3">3</div></div>
<div class="row row2">  <div class="row-item item1">1</div>  <div class="row-item item2">    <div> 2.1 </div>    <div> 2.2 </div>  </div>  <div class="row-item item3">3</div></div>

How to stretch flex child to fill height of the container?

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
    some<br> cool<br> text
  </div>
</div>

CSS Flexbox - Center all child elements with full height relative to the parent element

Let the .abouts flex parent use align-items: stretch to make the .item children take on their parent's height. Then (you could) make the .item children into flex parents themselves. You'll then have to adjust your text margins (because there is no margin collapse in flex formatting)

.abouts .item {
  flex: 1;
  margin: 5px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.abouts {  display: -webkit-flex;  display: -moz-flex;  display: -ms-flex;  display: -o-flex;  display: flex;  justify-content: center;  align-items: stretch;  text-align: center;  align-self: stretch;}
.abouts .item {  flex: 1;  margin: 5px;  padding: 15px;  background-color: rgba(0, 0, 0, 0.1);  display: flex;  flex-direction: column;  justify-content: center;}

<div class="abouts">  <!-- ITEM -->  <div class="item">    <h3>Vision</h3>    <p>Content here details, more content height...</p>  </div>  <!--/ ITEM -->
  <!-- ITEM -->  <div class="item">    <h3>Vision</h3>    <p>Content here details...</p>  </div>  <!--/ ITEM -->
  <!-- ITEM -->  <div class="item">    <h3>Vision</h3>    <p>Content here details, more content for test equal height all elements more content for test equal height all elements...</p>  </div>  <!--/ ITEM --></div>

How to vertically align and stretch content using CSS flexbox

HTML

<div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

CSS

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

.inner {
    align-items: center;
    display: flex;
}

---

Related Topics