1

Apologies if this is a duplicate question; I did search quite a bit but there are so many FlexBox questions (it's a confusing topic!). Anyway, I'm trying to create a horizontal row of boxes which have a minimum size and therefore will wrap when there are too many to fit on the one row. This part I have completed.

The problem is, it doesn't seem possible to both have the flex items fluid so that they fill up the parent container and have them all stay the same width between rows.

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  min-width: 150px;
  border: 1px solid #ccc;
  background-color: #eee;
  margin: 12px;
  padding: 4px;
}
<div id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>
T Nguyen
  • 3,309
  • 2
  • 31
  • 48
  • Yeah, it certainly seems that there probably isn't a way but thought I'd throw it out there in case I missed something. – T Nguyen Aug 06 '18 at 15:29
  • And no, I'm not interested in trying Grids just yet. The browser support isn't quite mature enough. – T Nguyen Aug 06 '18 at 15:30
  • how do you figure CSS Grids has better support than Flexbox? The oldest browser that supports it is desktop Chrome 63, which was only released last December. https://caniuse.com/#feat=css-grid – T Nguyen Aug 06 '18 at 15:33
  • So if you have 6 items, 3 go onto the first row with widths: 100, 150, 200. Is your goal to make it so stuff on the second row is 100, 150 and 200 too - even if by being fully "fluid" they'd have a different width? – Fabio Lolli Aug 06 '18 at 15:37
  • @FabioLolli, can you explain more what you mean? I don't want to set widths since that defeats the purpose of a fluid fexbox layout. – T Nguyen Aug 06 '18 at 15:39
  • @TNguyen yeah I was just tying to understand what is your goal with some numbers as an example - does the second row have to reflect the same widths on the first row, block by block? – Fabio Lolli Aug 06 '18 at 15:40
  • @FabioLolli "...and flex items are fluid but equal" – T Nguyen Aug 06 '18 at 15:40

0 Answers0