Closed 2 days ago.

I have this code:

I want to know if there is a way to have 4 items per row but not have the rows with <4 items to stretch to fill the space.

I’m trying to get my menu to space out evenly. It seems to be stuck in the middle and not expanding into free space on either side.

I have a flex container with direction row with 3 childs where the first has an intrinsic size and the others have a fixed width and height.

I have set the height of the main-menu element to 40px, why does the content element increase it’s vertical size and take the menu’s space?

I created a design with two images next to each other using Flexbox (css). In Edge and Firefox it looks good. The images are displayed nicely. When resizing the screen, the images scale well, both horizontally and vertically.

In my snippet below you can see that I have two inline elements: first a descriptive label, and then an inline-flex container.

I have some cards in a container. The mark-up for the cards is convoluted due to reasons I won’t go into, so assume that the HTML can’t be changed. The text content in the cards may vary in length and my objective is to align the avatar image at the bottom of the cards so that the avatars always line-up regardless of the length of content in the cards. I’m trying to achieve this using a flex layout and setting margin-top: auto on the .card__avatar element. However, the issue is that because these cards contain various nested wrapper divs I’m struggling to get the contents to occupy the full vertical space of the card.

How do I code this in css/flexbox?
Looking how to format this.
I want this figma image to display like this.