Как расположить элемент flex-контейнера по центру?

Question

[jupyter]

Всем привет.
Изучаю flex. Вот скрин части макета (см. фото).


Вопрос у меня следующий: как правильно выровнять по центру круглый блок с фото?
Для родительского flex-контейнера использую:

.about__list-left {
  display: flex;
  justify-content: flex-start;  /* либо значение flex-end  */
}

Понимаю, что теперь дочернему элементу (круглое фото) необходимо указать правильное св-во и значение, но какое?
Спасибо.

Answer 1

[Евгений Вольф]

Наверное, вот так?

Comments

[jupyter]

Дружище, спасибо, но у меня почему то так не работает... я тоже ставил margin 0 - он смещает элемент еще правее от центра, скорее из за первого элемента, который к левой границе спозиционированн (у вас его нет)...

[Евгений Вольф]

jupyter, у меня "margin: auto" (не нуль). Приведите пример кода (можно подредактировать мой), посмотрим, что там за элементы, которые "мешают".

[jupyter]

Евгений Вольф, сори, ошибся, margin auto имел в виду...
Добавил второй элемент, не знаю насколько верно, но по логике похоже на мой вариант:

и не то в результате...

[jupyter]

Евгений Вольф, https://codepen.io/jupyter/pen/ZZjjam

[Евгений Вольф]

jupyter, вариантов масса, один из них - абсолютное позиционирование (можно относительно элемента). Например так (будет работать и без flex'ов).

Так же можно сделать CSS-GRID'ы, в т.ч. в абсолютно (или не абсолютно) спозиционированном элементе и разместить нужные элементы в нём, при необходимости выровняв их по z-index'у.

Я кажется понял, что Вы хотите сделать... Самый "короткий" путь (в современных браузера) - это CSS-GRID, самый простой (с поддержкой всякого старья) - это абсолютное позиционирование.

Либо, как уже предложили - сделать 3 колонки.

P.S. Мне кажется, flex тут либо не особо пригоден, либо реализация будет через известное место.

[jupyter]

Евгений Вольф, спасибо, буду думать. Не то немного в вашем примере...

[Евгений Вольф]

jupyter, подредактировал предыдущий комментарий... Если Вас устраивает поддержка браузерами на уровне "~92.3%" (по данным caniuse) - я думаю Grid будет самым "изящным" вариантом.

[jupyter]

Евгений Вольф, спасибо, но до гридов еще не дошел.

Answer 2

[Владислав]

Так сделайте 3 колонки просто и все а дальше просто по nth-child(2n) меняйте значение order и все.

Comments

[jupyter]

была мысль сделать три, но и так ведь как то должно решаться?? Не костыль ли это - три колонки? Думал обойтись без nth-child(2n)...

[Владислав]

jupyter, А как тогда вы хотите что бы текст был то слева то справа? Если вы хотети давать другой класс или какой-то дополнительный, то человек который будет адаптировать это под любую CMS надает вам по рукам.

[jupyter]

Владислав, я хочу использовать для родителя justify-content: flex-start; /* либо значение flex-end */

[jupyter]

jupyter, вот что я сейчас имею...криво))

Answer 3

[Ragtime Kitty]

Я бы делала как-то так:

Comments

[jupyter]

спасибо!

Answer 4

[jupyter]

моя задача какая:
первая строка: 1 элемент прижат к левому бордеру, второй (круглый) - по центру
вторая строка: круглый по центру, 2 элемент прижат к правому бордеру
и т.д...