Why are my flexbox squares appearing as solid columns?

I’m working on my “Product Landing Page” project for HTML/CSS. I’m trying to make my products appear on screen in their own squares. For some reason, the boxes are appearing on my screen as two solid columns. My codepen is here. , I know it’s pretty ugly.
Thank you.

hey your css is fine, but what’s going on is flexbox don’t usually assign margin between flex-items for you. You have to define it yourself. So right now your flexbox columns have the items in red right on top of each other, creating the solid column effect.

/* select immediate child div of .flex-container */
.flex-container>div{
   margin:1rem;
}

there is no margin between the elements, so they appear glued to one another. i recommend you use a class selector for your flex items for easier targeting, isntead of creating an id for every one of them to apply the same css rules

I tried this and it worked. Thank you.

I’ve switched out the ids for classes. I’m not certain if “id vs class” was not explained or if it didn’t register for me. I’ve also gone through and cleaned up my margins. I feel bad for asking people to look at that spaghetti.

I would suggest using the gap property on the parent flexbox container instead of setting a margin on the children.

.flex-container {
  /* other css */
  gap: 2rem;
}

isnt gap grid property?

No, it works for Flexbox, and has so for quite some time now (caniuse: flexbox-gap).

It was initially Grid only and the shorthand property was named grid-gap, then it got unified and renamed to just gap (row-gap/column-gap).

8.2. Gap Shorthand: the gap property
Applies to: multi-column containers, flex containers, grid containers

8.4. Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties
The Grid Layout module was originally written with its own set of gutter properties, before all such properties were unified into the existing row-gap/column-gap naming.

1 Like