Flexbox justify-self: flex-end не работает?

У меня есть макет, в котором отсутствует иногда «левый» элемент. В таких случаях я все равно хочу, чтобы «правильный» элемент был выровнен по правому краю.

Я думал, что смогу сделать это с justify-self, но, похоже, это не так.

Есть ли свойство flexbox для выравнивания по правому краю?

.row {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left,
.right {
  display: inline-block;
  background-color: yellow;
}

.right {
  justify-self: flex-end;
}

<div class = "row">
  <!--<div class = "left">left</div>-->
  <div class = "right">right</div>
</div>

css flexbox

04.04.2018 20:57

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

56 764

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо этого вы можете использовать margin-left: auto в элементе right. Также, когда вы используете display: flex на родительском элементе, display: inline-block на дочерних элементах не будет работать.

.row {
  border: 1px solid black;
  display: flex;
  align-items: center;
}
.left,
.right {
  background-color: yellow;
}
.right {
  margin-left: auto;
}

<div class = "row">
  <!--<div class = "left">left</div>-->
  <div class = "right">right</div>
</div>

маржа: авто не отвечает, как я тестировал

— 17.11.2019 03:29

Чтобы добавить к этому ответу, justify-self просто не поддерживается в flexbox, потому что он оправдывает все свои элементы как группу. Подробнее здесь (вместе с подсказкой о марже): developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/…

— 17.01.2020 18:16

Я создал перо, чтобы подражать этому: codepen.io/srsgores/pen/abNLGgr

— 02.09.2020 21:16

margin-left / margin-right не помогли мне разделить их - вместо этого они центрировались.

— 27.10.2020 21:48

04.04.2018 20:59