0

I have a container like this with a maximum of three set-width blocks inside of it. enter image description here

By setting justify-content: space-between on the parent container; it equally spaces the child blocks when there are three present. However, when there are only two blocks, space-between causes it to look like this:

enter image description here

When there are two blocks, I would like instead for the child elements to both align to the left side of the parent, maintaining the same spacing that would be present if there were three elements (see the image below). I know of a few ways to address this including using vanilla CSS, but I'd rather not specify hard-coded margins unless it's a last resort. I considered using justify-content: start; and then applying selective/calculated margins based on the width of the child elements/parent.

Am I missing something? Is there a simple way to achieve this layout with flexbox? enter image description here

CodeLyfe
  • 250
  • 2
  • 11

0 Answers0