How to center a Flex list container with wrap and justify to flex-start elements

Question

I have some issues implement Flex-box, in my requirement for a view I have a list of cards, each card has a default width and height. I can use flex box and I prefer it. When the elements of the list don't fit in the row, they should wrap in a new one, always from the left to the right, and all the list be centered in the available space of the container.

Here is a plunker of the layout and the code:

.list {
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  background-color: #e6e6e6;
  margin: 12px;
}

<body>
  <div class="list">
    <div class="item">someItem01</div>
    <div class="item">someItem02</div>
    <div class="item">someItem03</div>
    <div class="item">someItem04</div>
    <div class="item">someItem05</div>
  </div>
</body>

This is what I'm trying to achieve:

And this is what I currently have:

How can I achieve the this without recurring to bunch of media queries, hard-coded margin/padding, etc?

I am a little unsure of "always from the left to the right, and all the list be centered" have you tried instead of `justify-content: flex start` using `justify-content: center` EDIT::: Ahhh I see you want them to be centered but still left aligned. — Enjayy, Sep 16 '16 at 17:56
Exactly, that's the problem, to have them align to the left but the container centered in the space like they where `justify-content: center` — Matias Fernandez Martinez, Sep 16 '16 at 18:17

score 5 · Accepted Answer · answered Sep 16 '16 at 18:58

5

It's not a very neat HTML, but you can achieve this result with some filler elements:

.list {
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  background-color: #e6e6e6;
  margin: 12px;
}

.filler {
  width: 200px;  
  margin: 12px;
}

<body>
  <div class="list">
    <div class="item">someItem01</div>
    <div class="item">someItem02</div>
    <div class="item">someItem03</div>
    <div class="item">someItem04</div>
    <div class="item">someItem05</div>
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="filler"></div>
  </div>
</body>

answered Sep 16 '16 at 18:58

vals

61,425
11
89
138

This is the easiest way I've found to deal with this issue. – Brian Glaz Sep 16 '16 at 19:05
very cool solution... but I guess that there are chances that we will have to add in more 'fillers' as the width of the screen increases... – kukkuz Sep 16 '16 at 19:17
This actually helps a lot, if I remove the margin top/bottom of the example fillers and add enough of them the display works as expected. Thank you very much. If anyone can think on a Solution which doesn't requires unnecessary HTML will be awesome – Matias Fernandez Martinez Sep 16 '16 at 19:46
1

@Matho, flexbox is not designed to be a grid system. It's a tool for aligning content and distributing space in a container. That's why a hack is necessary in this case. If you want a reliable grid there's always tables, [Desandro Masonry](http://masonry.desandro.com/) and, once it receives more browser support, [CSS Grids](http://www.w3.org/TR/css-grid-1/). – Michael Benjamin Sep 16 '16 at 20:16
2

@Michael_B yes, really this isn't a task for flex. Hopefully Grids will be available in the near future – vals Sep 16 '16 at 20:30

How to center a Flex list container with wrap and justify to flex-start elements

1 Answers1