Как вот так расположить элементы?

Question

[Даниил Сухих]

Есть 2 элемента в блоке header, выравниваю их display flex, как сделать что бы ЛОГОТИП был посредине а кнопка мобильного меню прижата к левому краю?

header {
	width: 100%;
	height: 70px;
	background: #5512a8;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: nowrap;
}

Answer 1

[Алексей]

Оберните в отдельные блоки и сделайте выравнивание внутри блоков
https://codepen.io/skazi_premiere/pen/qMpQMX
UPD:

.header_main__logo
  display: flex
  background-color: red
  width: 50%
  height: 100%
  justify-content: flex-end заменить на   justify-content: center

UPD 2:
Если я все правильно понял:
1. Блок с мобильным заголовком.
2. Логотип расположен по центру блока.
3. Кнопка вызова меню расположена слева в блоке.

Comments

[Даниил Сухих]

Мне нужно что бы Логотип был посередине фиолетового блока, а меню с краю блока.

[Алексей]

Даниил Сухих,

.header_main__logo
  display: flex
  background-color: red
  width: 50%
  height: 100%
  justify-content: center <= justify-content: flex-end

[Даниил Сухих]

Алексей, нечего не происходит

[Алексей]

Даниил Сухих, на codepen обновил стили проверьте еще раз.

[Даниил Сухих]

Алексей, оба элемента должны быть в одном блоке, выглядеть это должно так:

[Алексей]

Даниил Сухих, на этом сайте совсем все просто основной блок position: relative, а логотип position: absolute.
обновил codepen

[Даниил Сухих]

Алексей, мне нужно что-бы элементы были не на всю высоту блока

[Даниил Сухих]

Алексей, и что бы они были выравнены по вертикали

[Алексей]

Даниил Сухих, высота родителя 100%, высота объекта внутри родителя не важна

.logo_img
  align-self: center <= выравниваем элемент по центру
  height: 60%

Обновил codepen
Рекомендую flexboxfroggy.com

Answer 2

[mikeyuriev]

header {
  height: 70px;
  background: #5512a8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header:after {
  display: block;
  content: "";