如何使用flexbox在另一个div的末尾放置一个div？

Question

我想将子div放置在作为Flexbox的父div内，这样我希望子div在父div的末尾放置一些空间。

我正在尝试做的事情：

malloc/free

.outermost_div {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
}

.button_div {
  height: 40px;
  padding: 0 16px 0 16px;
}

.divider {
  display: inline-block;
  width: 1px;
  height: 40px;
  border-top: 9px solid white;
  border-bottom: 9px solid white;
}

.outermost_div.additional {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

下面的第一张图片显示了上面代码的输出，第二张图片是我想要的样子。

Answer 1

如果您在取消按钮上添加一点margin-right（以及justify-content: flex-end上的save_div）。这将为您提供所需的外观。

.save_div {
  display: flex;
  justify-content: flex-end;
}

button.button_div:nth-child(2) {
  margin-right: 100px;
}

<div class="outermost_div additional">
  <div class="save_div">
    <button class="button_div" onClick={ props.on_selected}Save</button>
    <div class="divider" />
    <button class="button_div" onClick={props.on_cancel}>
                Cancel
            </button>
  </div>
</div>

Answer 2

   .outermost_div.additional {
    display: flex;
    align-items: center;
    justify-content: flex-end; --added this
    padding-right: 60px; --added this
} 

.outermost_div {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    align-items: flex-end;
    padding-left: 8px;
    padding-right: 8px;

    .button_div {
        height: 40px;
        padding: 0 16px 0 16px;
    }

    .divider {
        display: inline-block;
        width: 1px;
        height: 40px;
        border-top: 9px solid white;
        border-bottom: 9px solid white;
    }
}

.outermost_div.additional {
    display: flex;
    align-items: center;
    justify-content: flex-end;
     padding-right: 60px;
}

<div class="outermost_div additional">
    <div class="save_div">
        <button class="button_div" onClick= 
            {props.on_selected} Save</button>
        <div class="divider"/>
        <button class="button_div" onClick={props.on_cancel}>
            Cancel
        </button>
    </div>
</div>