flex-wrap换行后，如何居中换行的第三个块元素？

当flex容器启用flex-wrap: wrap后，换行的元素默认沿主轴左对齐，仅使用align-self: center只能实现元素在**交叉轴（垂直方向）**的居中，无法达成水平方向的居中效果。以下是两种可行的解决方法：

方法一：利用margin:auto快速实现 #

通过给目标元素设置左右自动外边距，借助flex布局中margin:auto会自动分配容器剩余空间的特性，让元素在当前行水平居中：

.block3 {
  /* 需保持垂直居中可保留此行 */
  align-self: center;
  margin: 0 auto;
}

方法二：通过子容器控制单行对齐（适合复杂布局） #

如果仅需目标行的元素居中，可将第三块元素包裹在一个宽度100%的子flex容器内，再给子容器设置水平居中属性：

/* 父容器保留原有flex-wrap配置 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

/* 包裹第三块的子容器 */
.block-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者Serafim Nikolaev