使用d-flex布局时无法将元素分别移至左右两侧该如何解决？

问题原因 #

• 外层flex容器设置的justify-content-center属性会强制所有子元素沿主轴居中排列，天然不支持左右靠边分布的需求
• float属性在flex布局的子元素上完全失效，你给1、2元素添加的float: left和float: right不会产生任何效果

解决方法 #

利用Flex布局的auto margin特性搭配Bootstrap内置工具类即可实现需求，不需要额外写行内样式：

1. 去掉外层flex容器的justify-content-center属性
2. 给包裹1的容器添加me-auto类（对应margin-right: auto，会占用元素右侧所有剩余空间，把后续元素整体向右推）
3. 给包裹2的容器添加ms-auto类（对应margin-left: auto，会占用元素左侧所有剩余空间，把自身推到容器最右侧）

修改后的代码如下：

<div className="mt-5 mx-5 py-3 shadow bg-white">
  <div className="d-flex align-items-center">
    <div className="d-flex p-2 me-auto">
      <div className="p-2">1</div>
    </div>
    <div className="p-2 me-4">热门产品</div>
    <div className="p-2">低价</div>
    <div className="p-2 ms-4">高价</div>
    <div className="d-flex p-2 ms-auto">
      <div className="p-2">2</div>
    </div>
  </div>
</div>

当前写法已经可以实现1在容器最左、2在容器最右、中间导航元素居中的效果，符合常规业务场景的对齐需求。

内容的提问来源于stack exchange，提问作者Wahyu Agung Budiyanto