Как на FLEX прижать крайние элементы по краям?

Question

[Cheizer]

Подскажите пожалуйста, как кроссбраузерно прижать крайние элементы по краям? Что бы в IE11 тоже отображалось как и в остальных браузерах?

Вот как сделал, все ок в Chrome


Но в IE 11
крайние элементы тянуться на 100% и рвут контейнер родителя


Как изменить подход?

Comments

[Ankhena]

Вы же представляете что такое список?
Так вот, стрелки в список логически не входят.
А дальше все становится проще, обычный space-between.

Но если хочется вариант с нелогичной разметкой, то margin auto с нужной стороны
https://jsfiddle.net/sun8jey0/

Пофиксил, сделал по другому, на float

Флоаты не для этого. Флоаты нужно чтобы один элемент обтекался другими.

Answer 1

[Cheizer]

Пофиксил, сделал по другому, на float, без flex

.pagination__item:first-child {
  float: left;
}

.pagination__item:last-child {
  float: right;
}

Answer 2

[Никита Михайлов]

Может обернуть центральную часть пагинации в отдельный div и задать justify-content: space-between?

Comments

[Cheizer]

Спасибо, да так думаю проблем не будет, но не хотелось бы ul список дробить и менять на блоки

[Никита Михайлов]

Кстати, если ты уберёшь у pagination центрирование через justify-content, то всё сработает. Но как правильно описала Ankhena стрелки в список и не входят

[Cheizer]

Никита Михайлов, а есть доки, правила, что стрелки не входят в список?

[Ankhena]

Cheizer, в толковый словарь загляните

[Cheizer]

Ankhena, умник, сам загляни, не знаешь что сказать лучше помолчи, куча примеров пагинации списком нашел где сделаны стрелки. Куратор тега, а толком и сказать не чего.

[Ankhena]

Cheizer, хамить не стоит. Вы спросили где читать, я ответила.
Если вы стрелки включаете в список, то получаете дублированные элементы в списке. Это противоречит логике.
Если у вас (или ваших клиентов) нет цели заботиться о доступности, то без разницы что творится в коде, выглядит нормально и ок.

Куратор тега, а толком и сказать не чего.

Вообще-то я вам написала ответ как это делать на флексах, как вы и хотели. Причем в 2 вариантах.

куча примеров пагинации списком нашел где сделаны стрелки

Если вам нравятся кривые примеры для подражания, дело ваше.

[Cheizer]

Ankhena, не знал что под за ником девушка, прошу прощения за резкость. Поймите меня правильно, толковый словарь ваш задел меня, так как это не относиться к html и вообще. Я посчитал это оскорблением и скрытым намеком на глупость.

[Ankhena]

Cheizer, Мир :)
Глупость не смотреть в разного рода справочники, а смотреть как раз "умность".
Чем шире кругозор, тем лучше верстальщик, не говоря уже о программисте.
HTML это только технический способ разметки содержимого. Семантическая разметка это использование тегов по смыслу. А это важно для читалок, поисковиков и других анализирующих ботов.

[Cheizer]

Ankhena, так точно босс :)