Позиционирование Flex. Как правильно сделать?

Question

[Петр]

Разбираюсь с flexbox и столкнулся с небольшим непониманием позиционирования.
В примере по ссылке у меня страница где есть блоки Left и Right.
Как мне раскидать их по правую сторону и по левую?
https://jsfiddle.net/zrr4q0tr/

Answer 1

[Aleksey Solovyev]

https://jsfiddle.net/zrr4q0tr/1/ - так?
Если вам надо 2 в ряд, то https://jsfiddle.net/zrr4q0tr/3/

Comments

[Петр]

https://jsfiddle.net/Morpheus_God/cg0c8pfh/
скорее так надо. только все в одном div.

[Aleksey Solovyev]

Эмм... И зачем Вам flex? https://jsfiddle.net/zrr4q0tr/4/
Ну пусть будет flex - https://jsfiddle.net/zrr4q0tr/5/

А если делать прямо как Вы хотите(хотя очень странно выглядит структура html), то используйте grid. Flexbox решает другие проблемы(иными словами: сделать средствами flexbox нельзя)

[Петр]

Aleksey Solovyev, да я думал, что через флексы можно в одну линию раскидать контейнеры, только по правую часть и по левую.
Условно в header сделать лого сайта по левую часть сайта а меню и поиск по левую часть, чтобы логотип и меню с поиском были на одной линии.

[Aleksey Solovyev]

Петр, на практике лучше будет такая структура

<header>
	<div class="logo">
		<img>
	</div>
	<div class="navigation">
		... link etc
	</div>
</header>

Лишний div поможет избежать кучу проблем в будущем...
Тогда Вы сможете header'у задать flex и justify-content: space-between(прижать logo и nav к краям). А align-item: center, чтобы вертикально по центру были logo и nav, если высота у них будет разная.

[Петр]

Aleksey Solovyev, Спасибо, теперь разобрался.

Answer 2

[xXRustamXx]

Вот отличный сайт который тебе - наглядно все покажет: yoksel.github.io/flex-cheatsheet