无法在Flexbox中对齐元素

Question

I'm currently trying to align the last element in a flexbox with a height higher than its elements at the bottom of the flexbox, but I can't manage to do it. I know I can use align-content: stretch which is the default behavior, but I don't want gaps between my elements.

I just want "More Stuff" to be at the bottom of the box and aligned to the right, and I can't figure out how to do it by reading through the flexbox spec.

https://jsfiddle.net/k8dec2bx

HTML:

<div class="flex">
  <img/>
  <div>
    <p>
      Stuff
    </p>
  </div>
  <div class="bottom">
    <p>
      More Stuff
    </p>
  </div>
</div>

CSS:

.flex{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 500px;
  height: 600px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

img{
  width: 100%;
  height: 250px;
}

.flex div{
  width: 100%;
}

.bottom{
  align-self: flex-end;
  text-align: right;
}

Answer 1

First you need to put flex-direction: column on your .flex element as you're attempting to align items vertically. From here it's just a matter of manipulating flex-grow and flex-shrink to your desired result.

If you want the .bottom element hard up against the bottom, all you need to do is tell the other element (which I've given a class of .top to make things clearer) that it should grow to take up all the available space. This can be done with flex-grow: 1 .

This can be seen in the following:

 .flex { display: flex; flex-wrap: wrap; flex-direction: column; /* New */ align-content: flex-start; width: 500px; height: 600px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); } img { width: 100%; height: 250px; } .flex div { width: 100%; } .top { flex-grow: 1; /* New */ } .bottom { align-self: flex-end; text-align: right; } 

 <div class="flex"> <img src="http://placehold.it/100" /> <div class="top"> <p> Stuff </p> </div> <div class="bottom"> <p> More Stuff </p> </div> </div> 

Answer 2

It's easier to see if you put different colored backgrounds on your divs but your two elements are 100% width and on top of eachother in the center of the page because of the flex-wrap: wrap .

So, to align or justify the elements you need to set a flex direction first. (Setting the direction as either row of column changes what is considered the main axis you can see a diagram on MDN )

Row will set the main axis as left-right and column will set the main axis as up-down.

After that you can use Justify-content: space-beween to space the elements as much as possible in the box div along the main axis. ( align-content controls whatever is set as the opposite axis)

    .flex{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      align-content: flex-start;
      width: 500px;
      height: 600px;
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }