如何使用Flex布局将两个元素分别置于居中位置和右侧边缘？

希望元素A如图所示处于容器居中位置，元素B固定在右侧边缘。

你当前的代码使用了justify-content: space-between，这会让元素A靠左、元素B靠右，无法满足A居中的需求。

解决方案 #

通过Flex布局的自动margin特性就能实现这个效果，无需复杂设置：

修改后的CSS #

.flex{
  display: flex;
  align-items: center;
  background: lightblue; 
}

/* 让第一个元素（A）自动居中 */
.flex p:first-child {
  margin: auto;
}

对应HTML（保持原结构即可） #

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="main.css" />
    <title>sample</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
      <div class="row mx-auto text-center">
            <div class="col-12">
              <div class="flex">
                <p>A</p>
                <p>B</p>
              </div>
            </div>
      </div>
  </div>
</body>
</html>

原理 #

在Flex容器中，给元素设置margin: auto时，浏览器会自动分配该元素周围的剩余空间。这里给元素A添加margin: auto后，它会均分容器左右的剩余空间，从而自动居中；元素B没有额外设置，会自然停靠在容器右侧。

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