Parent align-content:flex-start; while having one child element flex-end?

Question

I'm able to align all child elements as flex-start like so:

.parent{
    display:flex;
    align-content:flex-start;
}

But then I have a child element, a one-off that I want to be able to create as a flex-end, but doing this won't work:

#child2{
    align-self:flex-end;
}

What is the reason child2 won't align as flex-end?

Answer 1

What is the reason child2 won't align as flex-end?

My answer here may be enough to answer your question:

• Why isn't align-self aligning my div to the bottom of my flexbox?

Here's another possible answer:

You haven't specified a flex-direction in your code. This means the container will apply the default value: flex-direction: row.

This means the main axis is horizontal and the cross axis is vertical.

The align-* properties (align-content, align-items and align-self) control the alignment of flex items on the cross axis (vertical, in this case).

So in your code you're saying:

• align my items at the top of the container
• align one item (#child2) at the bottom.

Assuming this is what you actually want, you would need to give the container some height. Without a defined height the container defaults to height: auto, the height of the content – leaving align-self with no where to go.

Then you'll need to consider that align-self doesn't work with align-content. It only works with align-items. (More details.)

In case you're actually wanting to align your items along the main axis ( horizontally), you would need to use the justify-content property. And the items are already justify-content: flex-start, because that's a default value.

However, there is no justify-self property for the main axis, like there is an align-self property for the cross axis. So you would need to use auto margins. (More details.)

Answer 2

Another solution might be, flex:1 to your previous child element

This filled up entier space and move child2 to right

#child1{
    flex:1; //
}