1

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

3 ответа 3

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>

1
  • 1
    А зачем псевдоэлемент?
    – ΝNL993
    7 фев в 14:10
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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.