align-self: flex-end not moving item to bottom

Question

As you can see here: JSFiddle

I want author div to be at the bottom of his parent container. I tried with align-self: flex-end; but it's not working. What am I doing wrong?

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  display: flex;
  flex-direction: column;
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
}

.item .author {
  width: 100%;
  align-self: flex-end;
  border: 1px solid #000;
}

<div class="flexbox">

  <div class="item">
    <div class="title">
      Title
    </div>
    <div class="content">
      Content
    </div>
    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="title">
      Title
    </div>
    <div class="content">
      Content<br>Content
    </div>
    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="title">
      Title
    </div>
    <div class="content">
      Content<br>Content<br>Content
    </div>
    <div class="author">
      Author
    </div>
  </div>

</div>

The `align-self` property moves flex items along the *cross axis*. In a column-direction container, the cross axis is horizontal. That's why `align-self: flex-end` isn't working in your layout: it's moving the item left / right, not top / bottom. — Michael Benjamin, May 15 '17 at 19:13

score 64 · Accepted Answer · edited May 15 '17 at 08:46

64

Try add to .author

margin-top: auto;

You also need to remove flex-end.

edited May 15 '17 at 08:46

Lajos Arpad

64,414
37
100
175

answered May 15 '17 at 08:38

Alex

59,571
22
137
126

Ok, but if i put width:50% it goes to the right, why? – user2490424 May 15 '17 at 08:41
3

remove align-self: flex-end; – Alex May 15 '17 at 08:42
6

Thanks, why do i have to do that and why with flex-end is not working? – user2490424 May 15 '17 at 08:46
4

You switched axes (vertical and horizontal). That means that self-align now working on horizontal line; To make this work you can use `justify-content: space-between;` but before that you should wrap all your elements (excluding author) into the wrapper. – Alex May 15 '17 at 08:52

score 7 · Answer 2 · answered May 15 '17 at 08:45

You can make a wrapper div around the divs which have to float from flex start. And the author outside the wrapper and give to .item justify-content: space-between;.

https://jsfiddle.net/0zq5a5xu/2/

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.author {
  width: 100%;
  border: 1px solid #000;
}

<div class="flexbox">

  <div class="item">
    <div class="wrapper">
      <div class="title">
        Title
      </div>
      <div class="content">
        Content
      </div>
    </div>

    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="wrapper">
      <div class="title">
        Title
      </div>
      <div class="content">
        Content<br>Content
      </div>
    </div>
    <div class="author">
      Author
    </div>
  </div>

  <div class="item">
    <div class="wrapper">
      <div class="title">
        Title
      </div>
      <div class="content">
        Content<br>Content<br>Content
      </div>
    </div>
    <div class="author">
      Author
    </div>
  </div>


</div>

Hope this helps.

align-self: flex-end not moving item to bottom

2 Answers2