Реализация на flexbox?

Question

[axblue]

Всем привет. Как можно это реализовать на flexbox, а точнее, как отцентрировать средний элемент(фото)?

Answer 1

[Vladislav Dragalev]

На самом деле нет ничего трудного, задайте блоку-контейнеру position: flex; Дочерним элементам задайте соотношение, например левому и правому блоку flex: 4, а центральному flex: 1; (первый параметр задает свойство grow), потом по ситуации добавьте flex-wrap: wrap, если хотите чтобы ваши блоки шли в разметке "сплошняком" друг за другом и задайте им flex-basis, в зависимости от минимальной ширины контейнера, или оберните каждую строку в отдельный контейнер, а дочерние блоки порадуйте свойством justify-content: space-between;
А когда будет необходимо менять местами правый и левый блок, используйте чудесное свойство order.
Удачи)

Comments

[axblue]

Беда, попробовал соотношения задавать, всё нормально пока нету одержимого, как только добавляю содержимое в элемент флекса, соотношения элементов начинают играть.

[Vladislav Dragalev]

AX Blue: Попробуйте поэкспериментировать со свойствами, точно не помню какое свойство отвечает за фиксацию соотношений, вот отличный гайд: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

[Ramoona]

Вы хотите, чтобы за вас всё написали? Скиньте свой пример реализации.

Comments

[axblue]

Сделать-то я сделал! Вопрос был всего лишь как отцентрировать картинку!