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

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >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.