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

Рейтинг: 1Ответов: 3Опубликовано: 07.02.2023

Подскажите пожалуйста, как можно задать расположение одного 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, чтобы выровнять его по центру, однако оно не сработало. Подскажите, в чем может быть проблема?

css html
Источник: Stack Overflow на русском

Ответы

▲ 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>

▲ 0

Свойство 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% это половина ширины кнопки), чтобы кнопка разместилась ровно по центру.

▲ 0

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

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