Explain how justify content works in a block container as described by this image?

Question

So the image above says justify content can be applied to block containers, and after experimenting with this code i still dont see it working i.e it doesnt centre/end items on the main axis or block axis.

 <body>
  <div id="wrapper">
  <div id="i1" class="item">1</div>
  <div id="i2" class="item">2</div>
  <div id="i3" class="item">3</div>
  <div id="i4" class="item">4</div>
  <div id="i5" class="item">5</div>
</div>
</body>

My css

#wrapper {
    height: 60%;
    border: 5px dotted rgb(66, 199, 240);
    justify-content: center;
   /* align-content: center; */
}

.item {
    border: 3px dotted orange;
    width: 50%;
    height: 10%;
    background-color: rgb(248, 175, 149);
    font-size: 1.5em;
}

*says justify content can be applied to block containers* --> there is no support for this. You have to wait a few years for this — Temani Afif, Mar 03 '23 at 08:59

score 0 · Answer 1 · answered Mar 03 '23 at 05:30

0

try to add display:flex; on wrapper

answered Mar 03 '23 at 05:30

Walnut

9
3

Explain how justify content works in a block container as described by this image?

1 Answers1