How to Vertically Align and Stretch Content Using CSS Flexbox

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;
}

Vertical alignment un-stretches the div in flex

For you rest elements (which is also a flexbox), you should be using align-items: center for centering the text inside (you have used align-self: center which centers the rest as a flex item inside the outer flexbox).

See demo below:

div.outer {  font-family: "Open Sans", Arial, Helvetica, sans-serif;  display: flex;  width: 100%;  height: 101px;  border: 3px solid pink;}
div.inner {  padding: 10px;  background: lightgray;  border: 1px solid darkgray;  display: flex;}
div.first {  flex: 3;}
div.rest {  flex: 1;  justify-content: flex-end;  align-items: center; /* <-- note this */}

<div class="outer">  <div class="first inner">I'm the first</div>  <div class="rest inner">we're</div>  <div class="rest inner">the</div>  <div class="rest inner">rest</div></div>

Foundation flex box stretch alignment with text vertically centered

HTML:

<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
  <div class="columns">
    <div class="row align-center text-center"><p>space</p></div>
  </div>
  <div class="columns">
    <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
  </div>
</div>

CSS:

div.row.align-stretch.text-center .columns {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.row.align-stretch.text-center .columns p {
  margin: 0;
}

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>

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/

Aligning items vertically with flex stretches child elements

Fixed it by wrapping the <span>-Element inside another <span>. Not sure, why it solved the problem or if it's a good way to solve it. But it did the trick.

Vertically align a stretched flexbox item

Add:

.logo {
  display: flex;
  align-items: center;
  height: 100%
}

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>

---

Related Topics