Css позиционирование помогите

А вот и местный клоун вернулся

Итак, давай разьясним.
Flex (или display: flex;) — это значение свойства display, которое активирует режим флекс-контейнера для элемента. Когда вы применяете это свойство к элементу, он становится флекс-контейнером, а его прямые дочерние элементы — флекс-элементами.

Flexbox — это метод компоновки, основанный на флекс-контейнерах, который позволяет легко управлять расположением элементов в контейнере.

Жастифай контент, это такая штука которая очень упрощает позиционирование элементов по экрану , например :
flex-start — выравнивание к началу контейнера.
flex-end — выравнивание к концу контейнера.
center — выравнивание по центру.
space-between — равномерное распределение элементов с равным пространством между ними.
space-around — равномерное распределение с равным пространством вокруг каждого элемента.

В основном используются center, space-between и space-around. Остальные 2 используются в обостренных случаях.

align-items: Это свойство управляет выравниванием элементов вдоль поперечной оси (по умолчанию — вертикально). Возможные значения:

flex-start — выравнивание к началу контейнера.
flex-end — выравнивание к концу контейнера.
center — выравнивание по центру.
baseline — выравнивание по базовой линии текста.
stretch — растягивание элементов на всю высоту контейнера (значение по умолчанию). Здесь используется в основном center.

display flex дается родительскому элементу, внутри которого один или несколько других, которые и нужно раскидать по сетке.

в бан клоуна!