Почему последние элементы списка тянутся на всю ширину?

Question

[Дима Долготер]

У меня так


А надо так

или видео
https://www.youtube.com/watch?v=uM_7n8SkuPY&featur...
Надо сделать без медиа запросов и можно что-то дописать в html если надо
https://codepen.io/DimaDolgoter/pen/zybwBm?editors=1000

Comments

[Rustam Bainazarov]

Если будут идеи, я напишу. Пока это дело не видится нормально решаемым.

[Johny Smith]

а чего вы не хотите медиа-запросы использовать?

[Дима Долготер]

Olek1, не я не хочу, по условию нельзя

[Rustam Bainazarov]

SpiderPigAndCat, напишите в вопросе это. Иначе люди будут тратить время и писать решения аналогичные моему.

[Rustam Bainazarov]

Решение с дополнительным блоком представляется вообще хренотой редкостной, которая есть хак и которая в реальном проекте может только путать.

[Дима Долготер]

SmthTo, пробовал что можно, удалил уже

[Johny Smith]

SmthTo, в доп. обёртках нет ничего архи страшного, все давно уже к ним привыкли, но как это может тут помочь?

[Rustam Bainazarov]

Olek1, тут дело в дополнительном блоке внутри родителя после всех li, который типа будет раздвигать всё это дело. LOLOL.

[Дима Долготер]

Olek1, я вот тоже не знаю ка может помочь доп обертка. но по условию можно дописать что-то в html

[Johny Smith]

SmthTo, типа распорки на флоатах но только на флексах?

[Rustam Bainazarov]

Olek1, типа того. Говно, короче.

Не понимаю радость автора методики от находки этого хака, цена которому — 0 рублей 1 копейка.

[Дима Долготер]

Olek1, сделал. тупо но работает

[Дима Долготер]

SmthTo, сделал. тупо но работает

[Rustam Bainazarov]

SpiderPigAndCat, наверное, это хорошо, покажите, к чему пришли в итоге.

[Дима Долготер]

SmthTo, в кодпене исправил

[Rustam Bainazarov]

SpiderPigAndCat, гы-гы, гы-гы.

А чего ради это задание? Умение выйти за пределы разумного? Надеюсь, этот наставник не учит делать простые вещи через такую жопу.

[Дима Долготер]

SmthTo, видать проверка смогу ли придумать что. ну вот такое придумал

[Johny Smith]

SpiderPigAndCat, это костыль, ради которого чтобы избавиться придумали флекс контейнеры, а вы его в флекс контейнеры вставляете, лучше уже тогда верстать обратно на флоате

_        _
  ( `-.__.-' )
   `-.    .-'
      \  /
       ||
       ||
      //\\
     //  \\
    ||    ||
    ||____||
    ||====||
     \\  //
      \\//
  omg  ||
       ||
       ||
       ||
       ||
       ||
       ||
       ||
       []

это тоже самое что и для машины придумали диски на колёса чтобы не использовать спицы как у велика, а вы решились ставить заново колёса со спицами на автомобиль, примерное тоже вы делаете, p.s. такое авто ехать то будет, но а смысл

[Дима Долготер]

Olek1, чел) я знаю что это костыль. Просто такое условие было

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/xmBXQv?editors=1100

Других нормальных вариантов нет.

Comments

[Rustam Bainazarov]

Не-е-е, ему нужно именно на Flexbox.

P. S. Я говорил, чтобы нужно нормально описать задачу, дабы люди не путались.

[Rustam Bainazarov]

Такое вот задание. Поиск лютого хака

[Сергей delphinpro]

SmthTo, чисто на флексах задача не решается. О единственном говно-хаке уже упомянули в комментах.
Лично я не вижу других решений.

[Rustam Bainazarov]

Сергей delphinpro, да, аналогично, я о том же.