CSS3 Flexbox Adjust Height of Vertically Aligned Elements

CSS3 flexbox adjust height of vertically aligned elements

You can't do this with the 2009 Flexbox properties because there is nothing comparable to the flex-basis property (the box-flex property from the 2009 draft is not the same thing as the flex property from the modern draft, as it can only accept a single floating point value rather than 0-2 integers and 0-1 lengths).

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

html,
body,
.container {
  height: 100%;
}

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.item {
  background: #eee;
  margin: 1px;
}

.item-1 {
  -webkit-flex: 1 1 10%;
  -ms-flex: 1 1 10%;
  flex: 1 1 10%;
}

.item-2 {
  -webkit-flex: 1 1 90%;
  -ms-flex: 1 1 90%;
  flex: 1 1 90%;
}

Flexbox - Align elements of unknown height vertically inside items

Try removing flex from your <h2> and adding flex-basis: 2em

h2 {
  flex-basis: 2em;
}

Example

Vertical alignment on flex item with fixed height

Because now you need to center text inside li if you set height.

ul {  display: flex;  list-style: none;  background: green;  width: 400px;  align-items: center;}ul li {  flex: 50%;}ul.fail {  background: red;}ul.fail li {  height: 100px;  display: flex;  align-items: center;}

<ul>  <li>I am some text</li>  <li>I am some more text I am some more text I am some more text</li></ul>
<ul class="fail">  <li>I am some text</li>  <li>I am some more text I am some more text I am some more text</li></ul>

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>

Align heights with Flexbox

According to this article, changing align-items: center; to align-items: stretch; will do the trick.

Vertical align the child elements with different height

Replace your .container style with.

height: 120px;
display: flex;
border: 1px solid gray;
align-items: center;
justify-content: space-between;

Check the snippet

.container {  height: 120px;  display: flex;  border: 1px solid gray;  align-items: center;  justify-content: space-between;}
.title {  font-size: 18px;}
.action-button {  float: right;  height: 50px;  width: 100px;}
.small-screen {  width: 160px;  display: inline-block;}

<div class="container">
  <span class="title">        Card header      </span>
  <button class="action-button">        Action      </button>
</div>
<br />
<div class="container">
  <span class="title small-screen">        Card header title here is longer      </span>
  <button class="action-button">        Action      </button>
</div>

---

Related Topics