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

Question

[iNeext10]

К примеру, возьмём следующий код:

<div class="header__body">
    <div class="header__logo">Это логотип!</div>
    <div class="header__actions">А здесь кнопка</div>
</div>

Какие есть варианты вёрстки, чтобы блок header__logo было посередине, а header__actions в конце?

Comments

[Ankhena]

Как выровнять один флекс элемент в начало, а другой в центр?

Answer 1

[Воващ]

это без мучений

Comments

[Юрий]

Я бы лучше добавил margin: 0 auto для header__logo вместо лишнего пустого элемента в DOMе.

Если нужны мучения и/или логотип строго посередине экрана, то можно либо кнопке добавить position: absolute, либо header__body — паддинг слева той же ширины, что и кнопка )

[Ankhena]

При незаданной ширине header__0 этот вариант бесполезен.
Да и видно, что не центр.

Как выровнять один флекс элемент в начало, а другой в центр?

[Воващ]

Ankhena, header__0 лишь заглушка => её ширина пусть будет 0
центр легко добивается классическим смешением на 1/2 ширины лого transform: translateX(50%)

[Ankhena]

Воващ,

центр легко добивается классическим смешением на 1/2 ширины лого transform: translateX(-50%)

Покажете для вашего варианта?

[Воващ]

Ankhena, изменил в ответе, дублирую тут https://codepen.io/V0vash/pen/JjXQVwY

для сравнения добавил x - будет центром

[Ankhena]

Воващ, Отлично!
А теперь замените текст на кнопке на "А здесь большая-большая кнопка".

Совпадения это хорошо, но нет.