Flexbox Wrap - Different Alignment For Last Row

I'm using flex box to align two items to left and right of the container, while vertically centre-aligning them. Here's a very simple example of what I'm trying to achieve. HTML:

Solution 1:

You can try adding some left margin to push your .second element to the right:

.second {
    margin-left: auto;
}

.container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.first {
  background-color: yellow;
  width: 200px;
  height: 100px;
}
.second {
  background-color: blue;
  width: 200px;
  height: 100px;
  margin-left: auto;
}

<divclass="container"><divclass="first"></div><divclass="second"></div></div>

Or, similarly, justify all elements to the right but push .first element to the left:

.container {
    justify-content: flex-end;
}
.first {
    margin-right: auto;
}

.container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.first {
  background-color: yellow;
  width: 200px;
  height: 100px;
  margin-right: auto;
}
.second {
  background-color: blue;
  width: 200px;
  height: 100px;
}

<divclass="container"><divclass="first"></div><divclass="second"></div></div>

Solution 2:

I found a solution but it is rather "hacky" in nature (see demo here, explanation later), in the sense that it requires you to explicitly know the width of the parent container which will trigger a layout change based on @media.

The reason why your code is not working is because of the confusion over how align-self works. In the flexbox model, "align" refers to alignment along the cross-axis (i.e. in a conventional sense of a "row" layout direction, that will refer to vertical alignment), while "justify" refers to alignment along the main axis (i.e. the row). To better explain my point, I hereby attach an image made by Chris Coyier from his flexbox guide:

Therefore, align-self: flex-start means telling the .first to align to the top of the container, and align-self: flex-end means telling .second to align to the bottom of the container. In this case, since you have not declared an explicit height for the parent, the parent will take on the height of its tallest child. Since both .first and .second are 100px tall, the parent will also have a computed height of 100px, therefore making no difference in the alignment (because both with be flush with the start and end of the cross axis).

A hack would be switching the flex-direction to row, with the following restrictions: You know how wide your container will be, or the explicit widths of its children. In this case the breakpoint will be at 400px, where .first and .second will intersect each other.

.container {
    width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100px;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
    align-self: flex-start;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
    align-self: flex-end;
}

@media screen and (max-width: 400px) {
    .container {
        height: 200px;
    }
}

Then again, here is a proof-of-concept fiddle, modified from your original one: http://jsfiddle.net/teddyrised/cncozfem/2/