Flex align-items does not work with flex-wrap?

Question

I sometimes feel like Flex is way too complicated.

I'm trying to create a container that has multiple lines of text at the end of it:

This should be really easy with Flex, right?

div {
  display: flex;
  align-items: flex-end;
  padding: 20px;
  height: 300px;
  background: #222;
  flex-wrap: wrap;
}

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

Done, the container uses flex, aligns items at the end and h1 creates a new line due to wrap and width of 100%. Perfect.

Not really:

Wait, what did just happen here? <p> is aligned to the bottom, but <h1> - not? But the parent container has align-items: flex-end;, what is this sorcery?

Worry not, there are amazing properties that should work, let's try:

h1 { align-self: flex-end; }

Nothing changes, hm, okay, then maybe:

h1 { align-self: end; }

Okay, what the hell now?

Please, could anyone explain to me what the heck did happen here and why is Flex so stupidly unintuitive? I could have done this using good old position: relative or even tables (I know, I know...) in 20 seconds. Is it only me or does Flexbox feel like a great powerful tool that is an overkill and headache for ~95% of the simplest cases?

Note: I DO NOT WANT TO ADD ANY EXTRA DIVS WRAPPERS OR CONTAINERS. I feel like wrapping h1 and p in a div and then aligning it would be fairly easy, but I'm not using Flex in 2021 to add unnecessary markup.

Prathamesh Koshti · Accepted Answer · 2020-12-15T13:46:05.203

Edit 1:

I forgot to mention in the original answer about the flex-wrap that when its enabled and row items get wrapped up and multi-line flexbox is created. In that case when you are aligning the content (I did not mention items since you want to consider all the elements not just elements that are on single-line), you need to use align-content: flex-end.

This will pack all the multi-lines occurring in your flex layout at the end of the flexbox, and your items will be aligned at the bottom.

When you were using align-items: flex-end, flexbox was aligning the items based on lines on which the element was placed.

When you used align-items: flex-end, elements are aligned as per the their line.

Heading
--------- // line 1
Paragraph
--------- // line 2

And when you used align-content: flex-end, lines are moved at the bottom.

Heading
Paragraph
--------- // multi lines are packed at the end of the flexbox

Here's working example for you:

body { margin: 0; padding: 0; }

div {
  display: flex;
  align-content: flex-end;
  padding: 20px;
  height: 300px;
  background: #222;
  flex-wrap: wrap;
}

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

<div>
  <h1>Header something something something header more of header and more and more</h1>
  <p>Just some content at the end of the div not sure what more to write</p>
</div>

https://jsfiddle.net/h9ykz0ue/

Your code doesn't really have any issues. I would recommend you using align-items: flex-end; instead of align-items: end; in your flex container.

The issue you are facing here is margin. Both <h1> and <p> have their own margins.

Since these elements are rendered side by side because of flex layout (but visually they are vertically stacked, thanks to flex-wrap). Also margin collapsing is not appearing in your layout, since it is not supported in flex layouts, it only appears in block layouts.

I would recommend you instead of using flex-wrap: wrap, use flex-direction: column with justify-content: flex-end this way:

div {
  .
  .
  flex-direction: column;
  justify-content: flex-end;
  .
  .
}

Here's the quick demo of what I was talking about:

body {
  margin: 0;
  padding: 0;
}

div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  height: 300px;
  background: #222;
}

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

p {
  margin: 0;
}

<div>
  <h1>Header something something something header more of header and more and more</h1>
  <p>Just some content at the end of the div not sure what more to write</p>
</div>

Here I have also removed the margin of <p> so that <h1> will be more closer to it. If not needed you can remove the styling.

Thank you but I think you might be wrong here, removing margins does not help so the issue must lie somewhere else: https://jsfiddle.net/pno45L3c/ — Wordpressor, Dec 15 '20 at 12:38
Can you elaborate on your requirement. What are you expecting here? — Prathamesh Koshti, Dec 15 '20 at 12:39
Here check it: https://jsfiddle.net/z6hopvqw/ , Its not just margin, its also flex-direction you need to change. Margin is optional here! — Prathamesh Koshti, Dec 15 '20 at 12:43
Your answer is perfectly fine and I'll accept it although I tried to learn something new and I still don't really understand why I need to use "column" layout for data that has no columns at all. Flexbox is really weird. — Wordpressor, Dec 15 '20 at 13:22
Even though you have accepted it, let me update my answer, I have another solution for your problem with only changing one line of the css — Prathamesh Koshti, Dec 15 '20 at 13:30
I have updated my answer, in this you don't have to force yourself to use column layout, just change one word and it will work for you. If anything is not clear notify me, I'll try to explain it with more clarity — Prathamesh Koshti, Dec 15 '20 at 13:55

score 1 · Answer 2 · answered Dec 15 '20 at 12:30

1

Alternate solution for this with flex, use with flex direction as column

div {
display: flex;
flex-direction:column;
justify-content: flex-end;
padding: 20px;
height: 300px;
background: #222;
flex-wrap: wrap;
}

answered Dec 15 '20 at 12:30

Hema Ramasamy

686
1
6
16

Flex align-items does not work with flex-wrap?

2 Answers2

Edit 1: