Как сделать внутри флексбокса с вертикальным направлением оси инлайн-блочные элементы?

Добрый вечер!
Нужно сделать так, чтобы два инлайновых блока (например, кнопки или ссылки) переносились на другую строку и при этом позиционировались бы по правому краю контейнера. Из стандартных решений - пляски с float \ clear, а также элементы-разделители (например, br). Набросал небольшой примерчик, чтобы было наглядно.

Два верхних блока - это флексбокс, и то, что у меня получилось с его помощью сделать. Два нижних блока - это то, как бы я решал проблему стандартным способом (есть еще вариант с float, но интересно, можно ли сделать так именно на флексе). Вопрос: есть ли способ заставить блоки во флексбоксе вести себя так же, как инлайн-блочные элементы, сохранив при этом удобство флексбокса?..

Заранее спасибо!
  • Вопрос задан
  • 279 просмотров
Решения вопроса 1
@kuatmus
Если я вас правильно понял то это делается так:

<div class="flex">
  <span>inline-block with long title</span>
  <span>inline-block. just block.</span>
</div>

.flex {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /*элементы сдвигаются к концу строки*/
  text-align: right;
}


Про FlexBox: на русском и английском

Поддержка FlexBox caniuse.com

Посмотрите в действие как работает FlexBox в генераторах, к примеру тут или тут
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
MyaFF
@MyaFF
Верстальщик
align-items: flex-end;

шпора
live
смотреть
раз уж почитать про флексы не нашли
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы