Jessica Jessica - 2 months ago 4
CSS Question

Nested 'justify-content: space-around' not working

I have 2 parent containers with 2 child containers in them. (Altogether there are 4 containers.) The wrapper that everything is wrapped in, and the wrapper that the 2 parent containers are in, are set to the following css style:

display: flex;
flex-wrap: wrap;
justify-content: space-around;


Problem

The wrapper that the 2 parent containers are in, doesn't seem to register the
justify-content: space-around;


Trying to Accomplish

I want all containers to have
justify-content: space-around;
. In addition to that, I want the 2 child containers to have
justify-content: space-around;
. Something like this:

enter image description here

I still want the 'less space' to adjust as the page size adjusts. So I therefore can't just add a margin to it.

JSFiddle





#container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.outerWrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.heading {
font-size: 20px;
}

<div id="container">
<div class="outerWrapper">
<ul class="wrapper" style="background-color: orange;">
<li class="heading">FIRST</li>
<li class="list">Item #01</li>
<li class="list">Item #02</li>
<li class="list">Item #03</li>
<li class="list">Item #04</li>
<li class="list">Item #05</li>
<li class="list">Item #06</li>
<li class="list">Item #07</li>
<li class="list">Item #08</li>
<li class="list">Item #09</li>
<li class="list">Item #10</li>
</ul>
<ul class="wrapper" style="background-color: lightblue;">
<li class="heading">Second</li>
<li class="list">Item #01</li>
<li class="list">Item #02</li>
<li class="list">Item #03</li>
<li class="list">Item #04</li>
<li class="list">Item #05</li>
<li class="list">Item #06</li>
<li class="list">Item #07</li>
<li class="list">Item #08</li>
<li class="list">Item #09</li>
<li class="list">Item #10</li>
</ul>
</div>
<div class="outerWrapper">
<ul class="wrapper" style="background-color: pink;">
<li class="heading">Third</li>
<li class="list">Item #01</li>
<li class="list">Item #02</li>
<li class="list">Item #03</li>
<li class="list">Item #04</li>
<li class="list">Item #05</li>
<li class="list">Item #06</li>
<li class="list">Item #07</li>
<li class="list">Item #08</li>
<li class="list">Item #09</li>
<li class="list">Item #10</li>
</ul>
<ul class="wrapper" style="background-color: burlywood;">
<li class="heading">Fourth</li>
<li class="list">Item #01</li>
<li class="list">Item #02</li>
<li class="list">Item #03</li>
<li class="list">Item #04</li>
<li class="list">Item #05</li>
<li class="list">Item #06</li>
<li class="list">Item #07</li>
<li class="list">Item #08</li>
<li class="list">Item #09</li>
<li class="list">Item #10</li>
</ul>
</div>
</div>




Answer

You're not stretching the width of the flex items of the main container. This means each item is packed together (content width) and justify-content: space-around has no space to work.

enter image description here

Add flex: 1 to .outerWrapper.

enter image description here

Now both items occupy the available width of .container, and justify-content: space-around has space to work.

#container {
  display: flex;
  flex-wrap: wrap;
  border: 2px dashed red;
  justify-content: space-around;
}
.outerWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 2px dashed black;
  flex: 1;
}
.heading {
  font-size: 20px;
}
<div id="container">
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: orange;">
      <li class="heading">FIRST</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: lightblue;">
      <li class="heading">Second</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: pink;">
      <li class="heading">Third</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: burlywood;">
      <li class="heading">Fourth</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
</div>

revised fiddle

To create additional space between the first two and last two items (like the image in the question), one method introduces a third flex item between them.

enter image description here

You can then control the width of each with the flex property.

.outerWrapper:nth-child(1) { flex: 2; }
.outerWrapper:nth-child(2) { flex: 1; }
.outerWrapper:nth-child(3) { flex: 2; }

You'll need to remove this spacer item when the boxes begin to wrap on smaller screens. Here's one way to do that:

@media ( max-width: 400px ) {
  .outerWrapper:nth-child(2) { display: none; }  
}

revised fiddle

Comments