Why aren't they wraping?

[Porphyrogennitos]

CodePen

I have #members ul { display: flex; justify-content: space-around; flex-wrap: wrap; but the members are not wrapping.

[luhah001]

Hi @Porphyrogennitos can you post your entire code. There are a lot of things which can deny the wanted wrapping. When you are in anywhere working in the Curriculum please use the possibility to post your code here over the get a hint option.

Another option would be to have a look if the set property isn’t overwritten with some other properties by using the developertools in chrome or firefox.

[nhcarrigan]

When you say they are not wrapping, can you explain what you are expecting to see?

I shrunk the screen and they did wrap:

[Porphyrogennitos]

Yes, but they do that when you want to make the browser smaller. I want them to be 5 and 5 by default.

Can you help?

[cherylm]

What happens when you decrease the width of the div they are in?

[Porphyrogennitos]

They wrap but I want them already wrapped as soon as the page loads.

[bedward]

You can decrease the size of the flex container, still not sure of what you meant by wanting them to be wrapped:

section #members{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 500px; /*<-- the added line*/
}

if you are talking about making them look like one after the other, the list already does that and you don’t need a flex container.

[Porphyrogennitos]

1. What does max-width mean?

2. I meant like that:

[bedward]

The max-width property defines the maximum width of an element.
For more info here…

[Porphyrogennitos]

Thanks for the link. I have another problem now. I want a gap between every item.

I put a margin-right style but this happens:

How can I have that gap without having 3 rows (1st: 4 items, 2nd: 4 items, 3rd: 2 items).

Instead, I want 2 rows (1st: 5 items, 2nd: 5 items) with the gaps between them.

[bedward]

You can achieve this using the Grid, with something like that :

section #members{
  display: grid;
  grid-template-columns: repeat(4, 20%); /* to make a grid of 4 columns 20% each*/
  justify-content: center; /* to center the items inside the grid*/
  gap: 5px; /* here you specify the gap or space between items*/
}
section #members li{
  background-color: red; /*This one just to show the items in color*/
}

[lasjorg]

The gap property also works with flexbox, although the browser support is still a bit lacking. I believe it should have landed in Safari but so far it’s only in the Technology Preview version.

Gap in flexbox & how to replicate it while we wait on Safari

[Porphyrogennitos]

So you are implying that instead of grid, I must use flexbox?

[lasjorg]

No, I’m just saying you can use Flexbox.

[Porphyrogennitos]

And how could I do that with flexbox?

Can you write it so I understand it?

[lasjorg]

I wasn’t really talking about the layout as much as just the gap property.

I’m sure you can do it with flexbox but it might not look exactly the same and the responsive behavior might be different. You would likely create two rows instead of trying to let the flex items wrap. Using flex-wrap would work fine without the gap, but with the gap it can become problematic.

[Porphyrogennitos]

I created 2 ul's with display: flex on each one and it worked just fine.

I noticed though that if I put * { box-sizing: border-box it shrinks:

Why?

This is without * { box-sizing: border-box:

[lasjorg]

You can read up on box-sizing.

box-sizing - CSS: Cascading Style Sheets | MDN

box-sizing | CSS-Tricks

Basically, it affects how the width and height of elements are calculated.

---

I would suggest you always set it along with any resets you have at the top of the CSS. This is usually how it is done.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Or (read more).

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}