Задать расположение flex элемента по центру

Question

Подскажите пожалуйста, как можно задать расположение одного flex элемента по центру, а другого оставить у правого края? Сейчас у меня заданы следующие свойства:

<div class="box">
  <button class="button button1">Button 1</button>
  <button class="button button2">Button 2</button>
</div>

.box {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.button1 {
  justify-items: center;
}

Я попробовал задать для button1 свойство justify-items: center, чтобы выровнять его по центру, однако оно не сработало. Подскажите, в чем может быть проблема?

Answer 1

Пример

.box {
  display: flex;
  padding: 10px;
}

.box::before {
  content: '';
  width: 78px; /* width button */
}

.button1,
.button2 {
  margin-left: auto;
}

<div class="box">
  <button class="button button1">Button 1</button>
  <button class="button button2">Button 2</button>
</div>

Answer 2

Свойство justify-items задает выравнивание по умолчанию для всех дочерних блоков по необходимой оси.

Т.е он должен задаваться родительскому блоку, для выравнивания дочерних элементов, а вы задаете его кнопке (дочернему элементу), ожидая, что он отцентруется по центру.

Подробнее про это свойство (с интерактивными примерами) можете посмотреть вот тут: https://developer.mozilla.org/ru/docs/Web/CSS/justify-items

Один из примеров реализации вашей задумки (не завязан на ширине кнопок):

.box {
  display: flex;
}

.button1 {
  margin-left: 50%;
  margin-right: auto;
  transform: translateX(-50%);
}

Т.к margin-left: 50%; смещает кнопку в центр относительно его левой стороны, то необходимо с помощью transform сместить ее по оси X левее (50% это половина ширины кнопки), чтобы кнопка разместилась ровно по центру.

Answer 3

Попробую "button 1" дать свойство justify-self со значением center

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

БЛОГ НА HUSL

Задать расположение flex элемента по центру

Ответы (3 шт):