Flexbox布局：将指定元素居中，其余元素环绕其排列

要让指定元素居中，其余元素环绕它排列，利用Flex布局的**自动外边距（auto margins）**特性就能轻松实现，具体修改如下：

修正后的HTML代码 #

<div class="wrapper">
    <span>1</span>
    <span>2</span>
    <span class="center-item">Centre</span>
    <span>3</span>
</div>

修正后的CSS代码 #

.wrapper {
    display: flex;
}

.center-item {
    margin-left: auto;
    margin-right: auto;
}

关键说明 #

1. 类名修正：原代码中HTML的类名拼写为wraper，CSS中是wrapper，需统一为wrapper才能让样式生效。
2. 自动外边距的作用：给目标元素设置margin-left: auto和margin-right: auto后，Flex容器会将剩余空间分配给该元素的左右外边距，左侧元素会被推到容器左边缘，右侧元素被推到容器右边缘，同时目标元素自动处于容器水平中心。
3. 移除多余属性：无需保留justify-content: center，自动外边距已经能实现所需的居中效果。

效果对比 #

• 当前原代码效果：
  
• 修改后目标效果：
  

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