CODEWITHSUNDEEP
htmlcss
Joshua Segal
Joshua Segal

Reputation: 583

Flex container makes my divs not go to the next line

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.

Upvotes: 1

Views: 2412

Answers (3)

Sumit
Sumit

Reputation: 68

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;

Upvotes: 5

thingEvery
thingEvery

Reputation: 3434

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

Upvotes: 0

Confidence Yobo
Confidence Yobo

Reputation: 128

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

Upvotes: -1

Related Questions