How to populate grid using flexbox

Question

I'm trying to populate a grid of n x 4 primeNG checkboxes (with labels) and I was wondering how to do that with flexbox.
What I want it to look like is so:

____________________
x    x    x    x    
x    x    x    x    
x    x    x    x    

____________________

Whatever space is available vertically, I want it to be left alone and not utilized. (On the contrary, if too many rows exist, a scroll bar is to be shown) When I try this with flexbox (and flex-wrap: 1), it uses all vertical space when, say, there are only 6 boxes (4 for the first row, 2 in the second halfway down the container). I'd want to set a specified height for each checkbox. Also, each column needs a specified width too, so if a label overflows, ellipses will be shown.

We're using primeNG throughout the project so if regular checkboxes are easier to work with in this situation, please feel free to let me know and I'll make the switch. Thanks!

Here is what it does: https://jsfiddle.net/6rtL0p8v/

How would I modify that so it keeps the subsequent rows up against each other (and the first)? Thanks!

Have you considered `align-content: flex-start` on the container? https://jsfiddle.net/6rtL0p8v/1/ — Michael Benjamin, Sep 18 '17 at 16:10
The answers on this question only work when the names are of the same length, https://jsfiddle.net/wzrok196/ otherwise you'll have to play with align-content and other attributes — James, Mar 01 '21 at 04:30

score 3 · Accepted Answer · answered Sep 18 '17 at 16:12

3

.container {
  width: 500px;
  height: 600px;
  background: silver;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.p-checkbox {
  margin-right: 10px;
}

answered Sep 18 '17 at 16:12

McHat

830
5
15

1

Thank you! That's what I was looking for – dangerisgo Sep 18 '17 at 17:28

How to populate grid using flexbox

1 Answers1