CODEWITHSUNDEEP
javascriptcssreactjsflexbox
Antoine
Antoine

Reputation: 5692

Distribute boxes of various heights evenly across flexbox columns

I have some boxes of the same width, but of different heights (depending on their content — they are notes of title+text), and a container of auto height (willing to scroll). The idea is to distribute the notes in the container across the columns, so that it looks like Google Keep. For now I am using flexbox rows, but I'm loosing space:

example with flexbox rows

My current CSS looks like:

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding: 10px;
}
.note {
  flex-basis: 50%;
}
.note>div {
  margin: 10px;
}

The problem is that if I switch to flex-direction: column, because of the height: auto of my flexbox container, the notes make only one column, because they don't see any reason to wrap. Calculating the container's height in Javascript would be quite hard to do without rendering the notes first (and I'm using React...) Am I missing something here?

Here is the result I'm looking to achieve:

enter image description here

I don't want to use jQuery, and I'd love to avoid Javascript...

Upvotes: 5

Views: 3513

Answers (1)

Antoine
Antoine

Reputation: 5692

I ended up abandoning flexboxes and used columns instead:

.container {
  column-count: 3;
  column-gap: 0;
  padding: 10px;
}
.note {
  display: inline-block; /* important to wrap notes not content */
  width: 100%;
}
.note>div {
  margin: 10px;
}

Use inline-block notes, and don't hide the overflow.

enter image description here

Upvotes: 11

Related Questions