Flexbox: All columns in same height with centered text

Question

SOLUTION: Sorry for duplicate, so, if you want make same height column with shorter content, this column must be flex too.

Final Solution:

main article {
  display: flex;
  align-items: center;
  justify-content: center;
}

PS: Sorry for duplicate

Original Post:

please, I have a problem to get same height of all column in my design. You can see it here:

https://codepen.io/littleTheRabbit/pen/ZEbBeGy

My problem is, that I want center (vertical and horizontal) article element content, but when I have to use align-self: center like here:

main article {
    align-self: center;
}

my column doesn't same height like menu or like aside (of course, if I use align-self: center to aside the same problem.

I'm trying google answer but everything what I found was same height when you're using more rows in flexbox (and nothing centered :/)

PS: As you can see I have full responsive menu. In left when you have big monitor, in all items when you have medium display and menu button in header when you have mobile without javascript :) Hopefully this can help someone

I'm trying add tricks like flex-flow: 1 0 auto into all children in main tag.

main > * {
  flex-flow: 1 0 auto;
}

but nothing helps

Please any advice?

PS: If is will be useful for future to other folks I can copy whole code here but I want keep it in my codepen all the time and I think that it doesn't need.

Thank you very much for any adice

That's because you're using `align-self: center` to center the *flex item*, not the *content of the flex item*. Treat the flex item as a flex container. https://codepen.io/Figueroa5566/pen/pojNeZd?editors=1100 — Michael Benjamin, Apr 21 '20 at 16:47
Thank you very much, yes, it works :) That means, any column which I want in the same height it must me ```display: flex``` too? — Bambi Bunny, Apr 21 '20 at 18:23
Yes. See the illustrations here for a clear understanding: https://stackoverflow.com/a/45599428/3597276 — Michael Benjamin, Apr 21 '20 at 18:32

Flexbox: All columns in same height with centered text

0 Answers0