CSS flex行内布局如何实现一个子div居中、另一个靠右对齐

你的代码存在两个直接导致布局失效的问题：

• 两个子元素都绑定了.one类，预先写好的右对齐类.two没有被第二个子元素使用
• 父容器设置justify-content: center的flex布局，会将所有子元素视为整体做居中排列，无法实现「一个元素相对父容器严格居中、另一个元素贴父容器右边缘」的非对称对齐效果，强行调整只会出现元素换行、整体偏移的问题。

优先用CSS Grid实现，逻辑最简单、对齐最精准，不会出现元素换行问题：
设置父容器为三等分逻辑的三列网格，左列自动留空，中间列放置居中元素，右列放置右对齐元素即可。
完整可运行代码如下：

<div class="parent">
  <div class="center-el">居中内容</div>
  <div class="right-el">右对齐内容</div>
</div>

.parent {
  border: 1px solid red;
  display: grid;
  /* 定义三列：左右列等宽自适应，中间列宽度适配内容 */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 auto;
  max-width: 600px;
  padding: 10px 0;
}

.center-el {
  /* 指定放在第二列，天然相对父容器水平居中 */
  grid-column: 2;
}

.right-el {
  /* 指定放在第三列，靠列右侧对齐 */
  grid-column: 3;
  justify-self: end;
}

补充：Flex实现方案 #

如果项目需要兼容不支持Grid的老旧浏览器，可以用Flex实现，注意如果不加绝对定位，居中元素的位置会受右元素宽度影响，无法严格相对父容器居中：

.parent {
  border: 1px solid red;
  display: flex;
  /* 不要设置justify-content: center */
  align-items: center;
  margin: 0 auto;
  max-width: 600px;
  padding: 10px 0;
  position: relative;
}

.center-el {
  /* 绝对定位脱离文档流，实现严格居中，不受右侧元素宽度影响 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.right-el {
  margin-left: auto;
}

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