I created .container flex container that includes 2 flex items:

I have a div where I want to apply justify-content: space-between but have the first 2 or last 2 (or whatever combination I need) of items “stick together”.

I’m learning flexbox and trying to figure out how to do this layout but cannot figure it out.

I’m trying to build out something with flex that has a layout like this…

In the example below the “viewer” element grows up over the page height

I’m trying to add linebreak to wrappable flex row items.
It basicaly work, but i have a gap i don’t understand.

I’m trying to make my site responsive and when the font size is 12 everything is fine. But when I set the font size to 13 my text is getting wrap due to the lack of space. I’m ok with the text wrapping but for some reason my div is taking up extra space than necessary and the border on the right is looking awkward.
Image 1
Image 2

I’m learning CSS flexbox. I have created the mockup shown below. The green box is a flexbox item in a flexbox row layout. I have troubles understanding why that green box does not fill the space all the way to the right of the browser window.

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.