how to center blocks after flex-wrap?

After flex-wrap wraps the block to the next line, I need to center it, but I can’t. How to center the third block? Here is an example from the codepen where I can’t

.block3 {
    align-self: center;
}

Codepen

>Solution :

You could opt for justify-content: space-between;:

.head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
}

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: red;
}

<div class="head">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

I’ve also added in a gap: 10px to ensure that the blocks never touch when next to each other or when wrapping.