Флексбокс, два элемента: как один сделать по центру, а другой справа?

Question

[triggerfinger]

Я в тупике, ощущение что такую простую вещь просто не реализовать на флексах.

https://codepen.io/kode88/pen/KZMqyY

Как один блок .one сделать ровно по центру, а второй прижат к правому краю?

Answer 1

[doweb]

Как вариант

Comments

[Андрей Федоров]

у вас центральный не по центру

[triggerfinger]

Я вообще имелл ввиду справа а не слева. И справа вашим решением я не могу сделать. Да и вообще костыль какой-то.

[doweb]

Обновил

[triggerfinger]

Konstantin, это конечно не красиво margin-left: calc(50% - 25px)

Печально.

[doweb]

Еще раз обновил

[triggerfinger]

Konstantin, спасибо, это приятнее. Итого: флексбоксом эту задачу реализовать невозможно, верно?

[doweb]

Поставьте block вместо флекса и взгляните на результат:)

[triggerfinger]

Konstantin, да там весь блок уже сверстан на флексах, куча медиа запросов. Преписывать с флекса не хочется, да и не зачем, решение нашлось в принципе.

Answer 2

[Андрей Федоров]

https://codepen.io/aliencash/pen/ppbwxM

Comments

[triggerfinger]

Не понимаю как так что у вас column, а элементы в row

[Андрей Федоров]

поскольку высота у вас фиксирована второй блок не влезает и переносится на следующую колонку. получется там две колонки.

[triggerfinger]

Андрей Федоров, ок. но элемент не центрирован (заметно если сделать узкий экран)

Answer 3

[alvvi]

https://codepen.io/anon/pen/RxRgOy

Answer 4

[Егор Живагин]

А так не проще ?

Comments

[triggerfinger]

Нет, так делать нельзя.

[triggerfinger]

Кроме того, элемент не центрирован.

Answer 5

[error401]

https://codepen.io/novichok/pen/LYWPOgp