how to center blocks after flex-wrap?

Question

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

Answer 1

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.