0

Hello I am trying to make 1 container with a a bunch of cards or listings inside of the container. The cards are overflowing over the right side instead of wrapping into a new row below the first row.

Please help mee out, I'm a newer dev and still kind of mind boggled by flexbox.... if you have any good resources to master the basics, please share as well!


.all-listings {
  display: flex;
  align-items: stretch;
  width: 100%;
  flex-basis: 0;
}

.listing-preview {
  margin: 10px;
  padding: 15px;
  width: 300px;
  height: 400px;
  background-color: white;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
  -moz-box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
  box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
}
Billy Keef
  • 31
  • 1
  • 7

1 Answers1

1

Add flex-wrap: wrap to .all-listings.

As for resources, I recommend checking out Traversy Media's channel on YT.

Youssef
  • 96
  • 2
  • 7
  • thank you!! crazy how I have just spent 30 min trying to figure this out on my own. I feel myself improving since when I first started building out projects, but it's things like this that make me realize how far I have to go. – Billy Keef Aug 29 '20 at 19:02