I seem unable to get the flex-grow property to take the padding of a div into account when choosing which element to grow.

I have a web project with a project section , the project are in the form of cards and the content in each project card is placed either on rightmost or leftmost. When i use media queries i am not able to center the content even though all the project cards have same class but the change is only applied to the very first card. I am really confused here.

I’ve got an info box with movie/tv show data and figure it’s fairly straightforward. But I’ve been battling this flexbox for (way too many) hours. I’ve tried countless solutions on here and elsewhere, but none work.
the box is simple: An image div (left) and text div (right) wrapped in a container.

I have a flexbox with three flex items with text in it.
I want to go from all three items in a row to a column directly when the items wants to start wrapping.
I don’t have to have a media query for this, it should only happen if no available space left.

I have some elements in acolumn flexbox which is itself a flex element. With a button the content of my last element is changing it’s width and becoming the wider element of the flexbox making it wider.
I want to prevent that because it’s not pretty. The width must not change when I press the button.

Following a guide on flex items, I have understood is as you can use “align-self” on a item to set its specific position inside its flex container. So in my case of trying to get the item to stay at the top of its container, I have used

I have a flexbox of three square images, which I want to adjust to the size of the browser window as I narrow or widen it. I’ve managed to do this. However, I would like each image to be a link. When I try to do this, the images don’t grow or shrink anymore.