柔性换行后如何居中?

Question

在flex-wrap将块换行到下一行之后，我需要将其居中，但是我不能。第三个街区如何居中?这是一个来自codependency的例子，其中我不能

.block3 {
align-self: center;
}

Codepen

Answer 1

您可以选择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>

我还添加了一个gap: 10px，以确保块在彼此相邻或包装时永远不会接触。