Html 如何仅使用CSS Flex在行上居中和右对齐

尝试了许多类似的变化，但无法使其工作。以下是最后一次尝试：

.parent {
  display: flex;
  //justify-content: center;
  width: 600px;
  background-color: yellow
}
.c {
  //flex: 1 1 0;
  //text-align: end;
  margin-left: auto;
  margin-right: auto;
  background-color: cyan;
}  
.e {
  //flex: 1 1 0;
  // text-align: end;
  background-color: grey;
}  
.bs {
  background-color: green;
  color: white;
  width: 70px;
}

使用html：

<div class="parent">
  <div class="c">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </div>
  <div class="e">
    <button class="bs">Help</button>
  </div>
</div>

好啊
取消
帮助

我知道如何通过在左侧放置一个“可见性：隐藏”按钮来解决这个问题，并使用带空格的justify content，但我想学习/知道如何仅使用CSS

---

非常感谢您的建议。

如果您希望它完全对齐，您可以添加一个空的子项

div

，并将三个子项

div

拆分为三分之一

这将起作用：

.parent{
显示器：flex；
背景颜色：黄色；
}
.家长组{
显示器：flex；
弹性基础：计算（100%/3）；
}
c{
证明内容：中心；
背景色：青色；
}
e{
证明内容：柔性端；
背景颜色：灰色；
}
.bs{
背景颜色：绿色；
颜色：白色；
}

好啊
取消
帮助

实现这一点的方法不止一种

此处仅使用CSS（无额外标记/隐藏元素），使用伪标记，使其和每个按钮包装分别占总宽度的1/3，方法是为它们提供

flex-basis:100%

，然后默认的

flex-shrink:1

将相等地收缩它们

.parent{
显示器：flex；
宽度：600px；
背景颜色：黄色
}
.parent:：在.c、.e之前{
内容：''；
弹性基准：100%；
}
c{
背景色：青色；
文本对齐：居中；
}  
e{
背景颜色：灰色；
文本对齐：右对齐；
}  
.bs{
背景颜色：绿色；
颜色：白色；
宽度：70px；
}

好啊
取消
帮助

.parent00\u 100perc、.parent01\u 100perc{
显示器：flex；
宽度：480px；
背景颜色：黄色；
}
.parent00_100perc:：之前{
内容：''；
弹性：0.100%；
}
.parent01_100perc:：之前{
内容：''；
弹性：01100%；
}
.spanflex00{flex:0 100%；}
.spanflex01{flex:01100%；}
.bs{
背景颜色：绿色；
颜色：白色；
宽度：70px；
}
.项目中心{
背景色：青色；
文本对齐：居中；
}
.对{
背景颜色：灰色；
文本对齐：右对齐；
}

解决方案由LGSon提供。我刚刚添加了一点，通过显示解决方案的初始化和收缩阶段来验证我是否理解它，即

第一阶段。在一条线上产生三个大小相等的部件的初始化。从左到右为空部分，中间部分带有居中的“确定”和“取消”按钮，最后一部分带有右对齐的“帮助”按钮。显示了3x480px和3x480px线的尺寸

第二阶段。init&收缩，在左侧以及中间和右侧按钮之间移除等量的空间。这使得“确定”和“取消”按钮仍然居中，并显示480px宽的结果>
第1阶段：初始化后0 100%

可以
坎塞尔
紧急求救信号
第二阶段：初始和收缩0.1 100%

好啊
取消
帮助
此方法/解决方案可以创建具有一个或两个边缘部分的居中中间部分，而无需向其中一个边缘添加空div或隐藏元素。