Design comparison
Solution retrospective
Feedback is welcome. Do like the responsivness?
I tried to align the button, which is the last element in my container with justify-self:flex end; but it didnt work (the container itself has display:flex;). Does somebody know why this didn't work?
Community feedback
- @rishat-sePosted over 2 years ago
Hello Martin,
Great Job! As for justify-self: flex-end. Flexbox do not support this command. When you applied flex-direction: column to the flex container, you turned Main axis of flex container downwards and the only align command that Flex supports along the Main axis is justify-content.
I have tested how to fix your issue with button alignment. One of the options I have found is to apply flex-grow: 1 to the paragraph element inside your flex container. That way paragraph element will take all the free space that appear when text wraps and push button element to the bottom.
Hope it will help. Have a nice day!
0@TheMrBombasticPosted over 2 years ago@rishat-se I didn't think of flex-grow, that might be an option, thanks!
There also appeared this strange behaviour when i use margin:0 auto; which should normally work in this situation (i read it online) but it just works somehow when i type it directly in the browser inspect funtion. Not on visual studio codde. That makes no sense to me :D
0 - @TheMrBombasticPosted over 2 years ago
Hi Lucas, this didnt fix my problem exactly because the other elemens are pushed down a bit too.
To be precise, my problem was that depending on the browser width, the paragraph got longer and shorter, which added up with the margins to unfortunate position of the button in some cases.
Greetings
0 - @iDominatePosted over 2 years ago
you need to work a bit on the buttons and the responsive side, other than that Gj.
0 - @correlucasPosted over 2 years ago
👾Hello Martin, congratulations for your new solution!
Answering your question:
To align the button equally between the cards use
justify-content: space-between;
.darkcyancontainer { padding: 2em; display: flex; flex-direction: column; background-color: var(--cl-darkcyan); justify-content: space-between; }
👋 I hope this helps you and happy coding!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord