CODEWITHSUNDEEP
htmlcssflexbox
TheFooProgrammer
TheFooProgrammer

Reputation: 2517

How to vertically align the content inside flex items?

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>

Upvotes: 4

Views: 4624

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372019

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>

Upvotes: 2

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

You can use webkit-align-items to m

-webkit-align-items:flex-end;

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

Upvotes: 2

Related Questions