Как разместить div в конце другого div с помощью flexbox?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я хочу разместить дочерний div внутри родительского div, который является Flexbox, таким образом, чтобы я хотел, чтобы дочерний div занимал некоторое место в конце родительского div.

Что я пытаюсь сделать:

 .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;
}

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

На первом рисунке ниже показан вывод приведенного выше кода, а на втором рисунке показано, каким я хочу, чтобы это было.

Ответ №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>

Ответ №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>