Как правильно выровнять строчный элемент и его псевдоэлемент внутри блока div?

Question

[ahillesius]

Подскажите, правильно ли я понимаю логику кода ?

https://jsfiddle.net/z1sck259/1/ - содержимое в комментариях к коду

Также интересует, работающий ли этот способ, если вместо строчного элемента блочный или есть какие-то ограничения ?

Comments

[Ankhena]

/*И почему, если псевдоэлемент по умолчанию inline, возможно проставить размеры height и width ?*/

У инлайновых элементов НЕТ высоты и ширины.
Но в вашем коде он не инлайновый, а блочный. Потому что у него родитель флекс.

Откройте инструменты разработчика и убедитесь в этом сами.

/*Свойство выравнивает псевдоэлемент внутри flex-контейнера "container_1" по высоте */

Это неверно.
align-items выравнивает вдоль поперечной оси. А куда она повернута зависит от flex-direction.
У container_1 получаются два дочерних элемента: span и псевдоэлемент ::before.

/*Свойство Выравнивает элементы внутри flex-контейнера "shipping_container"по высоте - то есть "container_1" и его псевдоэлемент*/

Нет.
Внутри shipping_container только один элемент и это container_1. Псевдоэлементов у shipping_container нет.

[ahillesius]

Ankhena,

/*Свойство Выравнивает элементы внутри flex-контейнера "shipping_container"по высоте - то есть "container_1" и его псевдоэлемент*/

Я имел в виду псевдоэлемент container_1.

У инлайновых элементов НЕТ высоты и ширины.
Но в вашем коде он не инлайновый, а блочный. Потому что у него родитель флекс.

То есть, если родитель flex , его дочерний элемент всегда block ?

[Ankhena]

ahillesius,

Я имел в виду псевдоэлемент container_1

container_1::before выравнивается флексом container_1, а не shipping_container.

То есть, если родитель flex , его дочерний элемент всегда block ?

Блочный. Не обязательно чисто block.

Answer 1

[Николай Угольников]

И почему, если псевдоэлемент по умолчанию inline, возможно проставить размеры height и width ?

А с чего должно быть невозможно? inline можно задавать размеры.

align-items: center; /*Свойство выравнивает псевдоэлемент внутри flex-контейнера "container_1" по высоте */

Если задать flex-direction: column, то будет уже выравнивать по ширине. Так что, выравнивает по центру поперечной оси

Comments

[Ankhena]

А с чего должно быть невозможно? inline можно задавать размеры.

Задавать возможно. Только они не применятся.
Размеры бывают у блоков и инлайн-блоков.
Но не у инлайнов.

[ahillesius]

Ankhena, Я это и имел в виду

[Ankhena]

ahillesius, но ваш псевдо блочный, а не инлайновый.
Подробнее я написала в комментарии к вопросу.