0

I'm new to flex containers, but I'm trying to have a container with justify: space-around, and have some divs inside it. If the screen gets too small, the inner divs should space out to the next line, but instead the inner divs stubbornly stay on the same line and just adjust their widths weirdly.

.container{
  display: flex;
  justify-content: space-around;
}
.inner-div{
  width: 40%;
  display: inline-block;
}

You would think if I had three inner divs in the container, the third one would just go to the next line, considering they're all have width: 40%, but instead they stay on the same line and squish the first then second div.

Joshua Segal
  • 541
  • 1
  • 7
  • 19

3 Answers3

2

flex-wrap:wrap; will work in this case.

The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.

Syntax : flex-wrap: nowrap|wrap|wrap-reverse|initial;

phwt
  • 1,356
  • 1
  • 22
  • 42
Sumit
  • 38
  • 5
0

Set your flex-wrap to wrap. I just answered the same question like an hour ago. https://stackoverflow.com/a/59553958/1195615

thingEvery
  • 3,368
  • 1
  • 19
  • 25
-1

In other to achieve that I suggest you use media query rather than flex, so u can have control over deferent resolutions/device sizes.

Confidence Yobo
  • 128
  • 8
  • 1
    That is a really bad suggestion. media queries should only be used where needed. There is no need to use a media query here because the property flex wrap can be used. – JΛYDΞV Jan 01 '20 at 19:01