Не работает text-alight: justify?

Question

[uzi_no_uzi]

Попытка задать фиксированную ширину дочерним элементам ни привела ни к чему хорошему

https://codepen.io/anon/pen/NLwwmq

Answer 1

[Денис Васильев]

text-align-last: justify;

https://codepen.io/corvus-007/pen/OoOzyP

Answer 2

[Павло Пономаренко]

Добавьте такие параметры:

.wrapper {
    display: flex;
    justify-content: space-between;
}

https://codepen.io/anon/pen/JaOMrw

Comments

[Froggyweb]

не надо во флексе искать панацею. нужно разбираться в поведении разных типов элементов.
может лучше display: grid написать.....

[Павло Пономаренко]

Froggyweb, у Денис Васильев хорошее решение. А флекс - еще одно решение для других задач. Что не так?

[Froggyweb]

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

[uzi_no_uzi]

Мне нужна поддержка IE9, флексы тут не подойдут

[sim3x]

uzi_no_uzi, такие вещи нужно писать в вопросе

[uzi_no_uzi]

sim3x, Зачем мне писать про это в вопросе? Я что, спросил как мне элементы выровнять? Я спросил, почему не работает конкретное свойство.

[Павло Пономаренко]

uzi_no_uzi, не работает потому что единственная/последняя строка не джастифается.

https://stackoverflow.com/questions/4771304/justif...

Here's a cross-browser method that works in IE6+

It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements.

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

If you have one line of text, use this to prevent the blank line the above CSS will cause

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

[sim3x]

uzi_no_uzi, где не работает?

И, да. В вопросе указываются все детали

[uzi_no_uzi]

sim3x, Уже дали решение данной проблемы. Зачем мне указывать все детали, которые не относятся к вопросу? Мне писать каждый раз "Flex box - не надо, Grid - не надо, JS - не надо"?

[sim3x]

uzi_no_uzi, требуется один раз нормально написать все в вопросе

Answer 3

[Froggyweb]

нормальное поведение.
прямо как в ворде
вот про выравнивание инлайн элементов