-
I have a flex layout with three columns.
Is there a way to keep buttons aligned in cases where one container has a longer title that wraps into the second line? I won’t have instances where the title is longer than 2 lines.
-
Hi George,
For reference, can you share the link to where we can see this setup?
-
Hi Fernando, it can be seen in the URL attached.
-
Hi George,
There isn’t an option in flexbox that would allow you to align the buttons by default.
Funny that Tom was asked a similar question once and this was his answer:
The issue you’re seeing isn’t an easy one to solve. Ideally, if you want everything to align, you need to make sure all of your headings are similar in length. If they aren’t similar in length, this sort of thing naturally happens in HTML/CSS.
I believe a potential workaround solution would be to put these items in their own containers:
https://www.screencast.com/t/yFXlTHZoc6Then set a fixed height for the containers so you can use
margin-top: autoon the button.Hope this helps 🙂
-
Hey Leo, the workaround works great, thanks!
-
No problem 🙂
-
Leo, that worked, is there a way to also center align the logos? I tried putting
margin-toptoautoon the images but it doesn’t quite work. -
The link requires a username and password to view.
Can you provide that?
-
Hi Leo, in the example attached, I set
margin-toptoautofor the images (not the buttons). That, in combination with a certain fixed height, titles and buttons seem to be aligned. If I ever wanted to cater for a possible title with 3 rows, I would have to increase the fixed height of the container that houses the title, image, button and headline (small text underneath the button).Overall, I am happy with it, just wondering if I could have a more automated layout.
-
Hi there,
if the only variable height element is the post title then a flex column with margin-bottom auto on the title should do the trick.
As long as everything after it has a static height that matches across the rows then that should work…. -
Oh man, that’s perfect, just what I wanted.
Thanks, David!
-
Awesome – glad to hear that!
-
Hi David, sorry for reopening this but I have an issue shown in the URL attached. When bullets are variable height the alignment doesn’t work. Is there a solution?
-
If theres more than one item that is of a variable height then there isn’t much you can do about it, either change where the auto margin is applied, or use a method like Leo provided. But theres no one method that fixes all possibilities with flex.
-
I just feel I am close but can’t quite get it. I set the container flex items to 100% height and justify-content to
space between. I should have equal heights but I don’t. Setting the flex container to stretch vertically doesn’t help. -
Ah, never mind, won’t work with variable titles. That’s annoying…
- You must be logged in to reply to this topic.