0

I'm sorry, I checked out multiple answers but nothing seems to work. If somebody could point me into the right direction, that would be helpful!

I have a Wrapper and 8 Boxes:

<Wrapper>
  <Box></Box>
  <Box></Box>
  <Box></Box>
  <Box></Box>

  <Box></Box>
  <Box></Box>
  <Box></Box>
  <Box></Box>
</Wrapper>

I want my Flex Wrapper to break after 4 Boxes, so I want to have 4 Boxes in a row. I have solved this in the following way:

Wrapper:

const Wrapper = styled.div`
  display: flex;
  flex-wrap: wrap;`;

Box:

const Box = styled.div`
  background-color: gray;
  width: 150px;
  height: 150px;
  margin: 5px;`;
  flex: 1 0 21%;`;

However, I'd like my Boxes to not stretch, I'd like them to always be 150x150px. Right now they're stretching and they're not 150x150 - I don't know what to do though?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
  • Just remove the `flex` property completely. It's not necessary in this instance. – Paulie_D Feb 20 '20 at 15:07
  • It won't break after 4 Items then though – R. Kohlisch Feb 20 '20 at 15:53
  • Not `display:flex` --- remove this --> `flex: 1 0 21%` – Paulie_D Feb 20 '20 at 15:55
  • Yes, I got that. But now it's no wrapping up my items after exactly four. – R. Kohlisch Feb 20 '20 at 16:05
  • So what do you expect...either you want a fixed size for these elements or not. Wrapping is a separate issue. Your container size will determine when the elements wrap. What layout are you trying to achieve? Are these elements supposed to be centered or something? – Paulie_D Feb 20 '20 at 16:12
  • Yeah exactly. I want a row of 4 Boxes, another row of 4 Boxes, all in a div thats centered. On smaller viewports i'd like to have only 1 box, on medium 2 boxes in a row. Really struggling with this. – R. Kohlisch Feb 20 '20 at 16:21
  • There's no real layout method that will do that for you dynamically without a whole bunch of media queries. You'd need to adjust the max-width of the container to adjust for the width of the contents *plus* any accumulated margins...at each break point - https://codepen.io/Paulie-D/pen/PoqGdNy – Paulie_D Feb 20 '20 at 16:51
  • Okay. Thank you! – R. Kohlisch Feb 20 '20 at 20:06

0 Answers0