Flex: как выравнять блок по центру родителя, независимо от соседей?

Question

[Посторонним В.]

Почитал про flex, узнал, что в нём не работает float.
Как же тогда сделать выравнивание первого элемента по центру, а остальные "скинуть" вправо?

<div class="parent">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

.parent {
  display: flex;
  border: 1px solid black;
  justify-content: center;
}

.one, .two, .three {
  display: flex;
  margin: 0 3em;
}

https://jsfiddle.net/prx62yLu/

Answer 1

[Посторонним В.]

Задал центральному блоку:
position: absolute;
right: 50%;
transform: translateX(50%);

А остальные выравнял по правому краю.

Comments

[Ankhena]

И что, это решение вопроса на флексах? Логика - огонь!

Answer 2

[Ankhena]

https://jsfiddle.net/n1wn9gvw/

Comments

[Посторонним В.]

какой-то странный метод для прогрессивного flexbox. Лезть в разметку, чтобы изменить стиль - плохая практика, вы, думаю, сами знаете.

Меня интересует решение чисто на CSS.

[Ankhena]

Посторонним В., ну замените на before и after
https://jsfiddle.net/wg6r12s1/

[Сергей Горячев]

Посторонним В., ты каких-то чудес ждешь от флексов.

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

Посторонним В., а то absolute внутри флекса для выравнивания - хорошая практика))
ИМХО, решение с before и after хорошее

[Ankhena]

Егор Живагин, не лучшее, потому что если блоков будет не 3, то придется как-то еще извращаться

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

Ankhena, да, не лучшее. Но это не совсем для флексов задача, я думаю.

[Ankhena]

Егор Живагин, да.

По этому отмеченное решение вообще повеселило )))

[Froggyweb]

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

Answer 3

[Александр]

https://jsfiddle.net/AlexZaw/jvk7xwpn/
не оно?

Comments

[Посторонним В.]

One должно быть по центру parent