Flexbox for responsivness

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!

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

you need to work a bit on the buttons and the responsive side, other than that Gj.

👾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!