javascript - Distribute boxes of various heights evenly across flexbox columns - Stack Overflow

admin管理员组

文章数量:1299983

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:

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:

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

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:

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:

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

• javascript
• css
• reactjs
• flexbox

Share Improve this question Follow edited Apr 1, 2016 at 23:02 Antoine asked Apr 1, 2016 at 22:52 AntoineAntoine 5,69966 gold badges3535 silver badges5555 bronze badges 8

• Are you missing something? No, as you said,...if the column doesn't have a definite height it has no reason to wrap. – Paulie_D Commented Apr 1, 2016 at 23:01
• I know, I'm looking for a way to make them wrap... – Antoine Commented Apr 1, 2016 at 23:02
• Then a height has to be involved...even if it's 100vh...something. Otherwise you are looking at a JS solution. – Paulie_D Commented Apr 1, 2016 at 23:03
• 1 Alternatively, abandon flexbox and consider CSS Columns – Paulie_D Commented Apr 1, 2016 at 23:04
• Problem is, with flexboxes, if for example I set the height to 100vh, if there are too many notes to fit in, the extra ones will be ignored and not shown... I looked at CSS columns also, but it breaks my blocks into pieces of text – Antoine Commented Apr 1, 2016 at 23:06

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 11

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.

本文标签： javascriptDistribute boxes of various heights evenly across flexbox columnsStack Overflow