对齐组件和组件内的按钮

Question

我有两个React组件Open和Save。 Save组件包含一个saveButton。 Open组件包含openButton，以及根据组件状态显示的stopButton和executeButton。我希望我的Open和Save组件在同一行上彼此相邻排列：

<div style={{display:'flex', flexDirection:'row}}>
    <Save></Save>
    <Open></Open>
</div>

初始状态如下：

四个按钮均显示的状态如下：

请记住，执行和停止是包含“打开”按钮的同一Open组件的一部分。如何对齐组件，以使“保存/打开”按钮一直向左对齐，而“执行/停止”按钮一直向右对齐？

为澄清起见，我希望按钮的格式如下：

Save Open ------------all whitespace here--------------- Execute Stop

编辑：这是组件的代码（非常简化）

// Save 

<Button>Save</Button>

//Open
this.state = { executeFlag: false, stopFlag: false}
render(){
    let stop;
    let execute;
    if(this.state.stopFlag) stopButton = <Button>Stop</Button>;
    if(this.state.executeFlag) executeButton = <Button>Execute</Button>;
    return(
        <div>
            <Button>Open</Button>{execute}{stop}
        </div>
    );
}

Answer 1

在CSS中，您可以尝试将按钮的宽度分别设置为50％，边距设置为零。我相信flex会在适合的情况下显示在同一行上。

Answer 2

有几种方法可以做到这一点……这实际上取决于组件的结构，而不仅仅是控制按钮。这是一个示例结构，通常用于纯HTML CSS中类似的内容，供您参考

.container {
  display: flex;
}

.component-b {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
}

.sub-menu{
  display: flex;
  justofy-content: flex-end;
}

.button {
  background: #1E88E5;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
}

<div class="container">
    <div class="component-a button">
      Save
    </div>
    <div class="component-b">
      <div class="button">
        Open
      </div>
      <div class="sub-menu">
        <div class="button">
          Execute
        </div>
        <div class="button">
          Stop
        </div>
      </div>
    </div>
</div>

Answer 3

一种实现方法是将两个组件集包装在一个div中，然后将所有组件包装在div中，并使用flex属性

<div style={{
   display:'flex'
   justifyContent:'space-between',
   aligItems:'center'
    }}
>
<div style={{display:'flex', flexDirection:'row',justifyConetent:'space-around'}}>
    <Save></Save>
    <Open></Open>
</div>
<div style={{display:'flex', flexDirection:'row',justifyConetent:'space-around'}}>
    <Execute></Execute>
    <Stop></Stop>
</div>
</div>