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

Question

[Алексей Николаев]

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

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

Заранее спасибо!

Answer 1

[Kuat Mustafin]

Если я вас правильно понял то это делается так:

<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 в генераторах, к примеру тут или тут

Comments

[Алексей Николаев]

Спасибо, не предполагал, что выравнивание через align-items скажется на ширине

[Kuat Mustafin]

align-items: flex-end; при flex-direction: column; а justify-content: flex-end; при flex-direction: row;

Answer 2

[Ольга Грабко]

align-items: flex-end;

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