How to vertically align the content inside flex items?

Question

I have a flexbox header that contains two child flex items. These flex items in turn have their own children.

Is there a way to override the vertical alignment of the flex items so that their children are aligned at the bottom?

div.flexbox {
  display: flex;
  align-items: stretch; /* cross axis */
  justify-content: space-between; /* main axis */
  flex-flow: row wrap;
  border-bottom: 1px solid #ddd;
  min-height: 100px;
}

.item-1, .item-2 {
  padding: 10px;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}

<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

score 2 · Accepted Answer · answered Dec 23 '12 at 16:35

2

You can use webkit-align-items to m

-webkit-align-items:flex-end;

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

answered Dec 23 '12 at 16:35

Praveen Vijayan

6,521
2
29
28

I can't do that in this case, because I want the flex items to stretch: http://jsfiddle.net/5N2km/2/. What I want is to have the children of flex items to align at the bottom. Maybe I should make item-1 and item-2 flexboxes as well, and then apply align-items flex-end on them, like this: http://jsfiddle.net/5N2km/3/? – TheFooProgrammer Dec 24 '12 at 01:11
Yes, make items also flexbox and apply 'align-items' will work, as you showed in this http://jsfiddle.net/5N2km/3 – Praveen Vijayan Dec 24 '12 at 13:59

Michael Benjamin · Answer 2 · 2017-04-22T19:33:29.363

You can switch the value of align-items on the container from stretch to flex-end. Maybe that's what you're looking for.

div.flexbox {
  display: flex;
  align-items: flex-end;  /* adjusted */
  justify-content: space-between;
  flex-flow: row wrap;
  border: 1px solid black;
  min-height: 100px;
  padding: 5px;
}

.item-1, .item-2 {
  padding: 10px;
  border: 1px dashed red;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}

<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

But since your actual question is:

Is there a way to override the vertical alignment of the flex items so that their children are aligned at the bottom?

... then you should make the flex items into nested flex containers and vertically align the content with flex properties:

div.flexbox {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-flow: row wrap;
  border: 1px solid black;
  min-height: 100px;
  padding: 5px;
}

.item-1, .item-2 {
  display: flex;          /* new */
  align-items: flex-end;  /* new */
  padding: 10px;
  border: 1px dashed red;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}

<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

How to vertically align the content inside flex items?

2 Answers2

Linked