Text-align не работает при flrxbox-выравнивании?

Question

[tundramani]

Заметил что если блоку назначить flrxbox-выравнивание то text-align перестает действовать, то есть flexbox его перекрывает.

Так ли это?

Вот пример:

<span id='s'>текст</span>

#s {
width: 400px;
border: 1px solid red;
display: flex;

justify-content: flex-end;
text-align: left;
}

— текст выравнивается справа, несмотря на то что text-align: left

Comments

[Lynn «Кофеман»]

Примеры или ссылку на кодепен

[tundramani]

Алексей Тен, добавил код

[Lynn «Кофеман»]

А html к нему?

[tundramani]

добавил

[Ankhena]

Так ли это?

Не так. Точнее не так, как вам хочется.
span унаследовал свойство text-align https://jsfiddle.net/67qny2ou/

Флекс распределяет свои дочерние элементы и делает их блоками в явном или неявном виде. И даже просто текст становится таким элементом. Его ширина определяется шириной содержимого, если не задана в явном виде. Т.е. ширина = ширине самого текста, в вашем случае слова. На выравнивание там нет места.

Answer 1

[Lynn «Кофеман»]

Блок с display: flex выравнивает своих детей как указано в justify-content.
В частности текстовый узел образует такого ребёнка. Внутри текстого узла выравнивание задаётся свойством text-align, но поскольку у вас там всего одно слово, то это никак не проявляется.

А если написать побольше, то видно, что текст выравнивается по левому краю.
https://dabblet.com/gist/caa1046e016f52503fbb73663...