Стили для разной ширины экрана.
Цель : хоть какая то реакция на изменение ширины браузера. Реакция непонятная.
:root { --width_n: calc(100% / max(1,(5 - var(--m, 0)))); }
ul.column { display: flex;
flex-wrap: wrap;
justify-content: center ;
& li { flex: 0 0 var(--width_n);
padding: 5px;
@media (max-width: 1560px) { --m: 1;}
@media (max-width: 1160px) { --m: 2;}
@media (max-width: 860px) { --m: 3;}
@media (max-width: 480px) { --m: 4;}
& img { border-radius: 10px;
max-width: 100%;
height: auto; } } }
HTML такой короnкий, т.к. идет сборка через JS и запись в HTML. Это работает, картинки на месте.
<ul id="column" class="column"></ul>
Мне кажется , я придумал способ короткий удобный , красиво. Но он не работает. :) .
Изначально ширина планировалась 5 столбов. Т.е. для максимальной ширины, больше 1560рх , общий стиль без @media{} .
Ширина картинка равно
flex: 0 0 20%; Работает частично.
Вот какой код был к оригинале:
spoiler/*
ul.demo-2-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-2-column li{ flex: 0 0 50%; max-width: 50%; padding: 0 15px;}
ul.demo-3-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-3-column li{ flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 15px;}
ul.demo-4-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-4-column li{ flex: 0 0 25%; max-width: 25%; padding: 0 15px;}
ul.demo-5-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-5-column li{ flex: 0 0 20%; max-width: 20%; padding: 0 15px;}
*/
media (max-width: 991px) {
/* .demo-3-column li{ flex: 0 0 50%; max-width: 50%;}
.demo-4-column li{ flex: 0 0 50%; max-width: 50%;}*/
media (max-width: 567px) {
/* .demo-3-column li{ width: 100%;}*/
/*
.demo-4-column li{ flex: 0 0 100%; max-width: 100%;}
.demo-3-column li{ flex: 0 0 100%; max-width: 100%;}
.demo-2-column li{ flex: 0 0 100%; max-width: 100%;}
*/
Все это лишнее.
1. Но почему-то упорно ширина делится 4 , а не на 5. Откуда 4 ? Откуда обязательная единица ?
2. Все-таки срабатывает уменьшение на 1 столб при экране меньше 256рх (3 столба). Также срабатывает на мелких 128рх (2 столба) 114рх (1 столб) (условно). Таких цифр в коде нет.
3. Загадочная черная точка у каждой картинки, внизу слева. Что это такое ?
Ответы, основанные на решении Ивана и :
1. Загадочная черная точка . Это список —- list-style: none; )
2. Т.к. flex-shrink: 0, то 5 столбов были бы на экране и в этом коде. При ширине экрана (5+800+5)*5
3. Расчет flex-basis вынесен из :root в класс
Результат:
PhotoBox
Продолжение галереи (полная версия):
Галерея. Lightbox. Как пропустить общий вид и выйти сразу на Lightbox? 
Простой
