Как отцентрировать блок без пустого дива??

Question

[maketosLikes]

тоесть чтобы блок с цифрой 1 был по центру
блок с цифрой 2- с правой стороны
https://jsfiddle.net/25Lxcm3f/

Comments

[Rsa97]

Там нет блока с цифрой 3.

[maketosLikes]

Rsa97, обновлено

[Ankhena]

Как отцентрировать блок без пустого дива??

Т.е. с пустым div можете?

После этого меняете пустой div на псевдоэлемент.
Всё.

Либо делаете это не флексами.

[maketosLikes]

Ankhena, вмысле меняете?

[Ankhena]

maketosLikes,

вмысле меняете?

В прямом.
div стираете, вместо него используете псевдоэлемент.

[maketosLikes]

Ankhena, почему то не хочет https://jsfiddle.net/wtyjqm1d/

[Ankhena]

maketosLikes, пустой див ведь не внутри первого итема был?
А внутри .wrap, ему и задавайте псевдо.
И не в конец, а в начало, before.
И не абсолют.
А нормальный, в потоке, он же должен иметь такой же размер как и правый айтем.

Но зачем так извращаться? Зачем делать это флексами?

Есть гриды, есть абсолюты.

Answer 1

[Ankhena]

Гридами


Или вообще без псевдо, но с grid-column-start для первого итема

Answer 2

[weranda]

Задайте второму блоку правило flex-grow: 1

Answer 3

[Pavel-ww]

Что бы прям точно по центру, то так.

.wrap {
	display: flex;
	justify-content: center;
	position: relative;
}
.item:last-child {
	position: absolute;
	right: 0;
}

Все другие варианты (в контексте flexbox) будут учитывать ширину второго блока и смещать первый от центра на ее размер.
Например такой вариант

.item:first-child {
	margin: 0 auto;
}

Если ширина второго блока статична и известна, можно использовать calc в каком-то виде

Answer 4

[Ssonik]

Как вариант

<div class="wrap">
  <button class="item-1">1</button>
  <button class="item-2">2</button>
</div>

.wrap {
  display: flex;
  padding: 0 0 0 20px;
}

.item-1{
  margin: 0 auto;
}