Создание автоматизированных горизонтальной прокрутки плитки с различной прокруткой с чистым CSS

Question

Я хочу, чтобы создать новости горизонтальных бегущие плиток слайдера с чистым CSS без JS

Я попытался с помощью Flexbox,

.spotlight-wrapper { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
} 
 
.spotlight-wrapper .spotlight { 
 
    list-style: none; 
 
    height: 230px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    justify-content: bottom; 
 
    padding: 0; 
 
} 
 
.spotlight-wrapper .spotlight li { 
 
    width: 220px; 
 
    height: 220px; 
 
    background: #ccc; 
 
    margin: 5px; 
 
} 
 
.spotlight-wrapper .spotlight li.small { 
 
    width: 105px; 
 
    height: 105px; 
 
} 
 
.spotlight-wrapper .spotlight li.medium { 
 
    width: 220px; 
 
    height: 105px; 
 
    /* 
 
\t \t \t \t * Idea to fix it, but will cause 
 
\t \t \t \t * issue if the medium tile in the 
 
\t \t \t \t * bottom level, and there are 2 small 
 
\t \t \t \t * tiles next to it in the top level 
 
\t \t \t \t */ 
 
    /* & + .small + .small{ 
 
\t \t \t \t \t display: block; 
 
\t \t \t \t \t clear: both; 
 
\t \t \t \t \t justify-content: bottom; 
 
\t \t \t \t \t margin-top: 120px; 
 
\t \t \t \t \t margin-left: -110px; 
 
\t \t \t \t } */ 
 
} 
 
.spotlight-wrapper .spotlight li.red { 
 
    background: red; 
 
}

<div class="spotlight-wrapper"> 
 
\t <ul class="spotlight"> 
 
\t \t <li>Tile #1</li> 
 
\t \t <li class="small">Tile #2</li> 
 
\t \t <li class="small">Tile #3</li> 
 
\t \t <li class="medium">Tile #9</li> 
 
\t \t <li class="medium">Tile #10</li> 
 
\t \t <li>Tile #2</li> 
 
\t \t <li class="medium red">Tile #1</li> 
 
\t \t <li class="small red">Tile #2</li> 
 
\t \t <li class="small red">Tile #3</li> 
 
\t \t <li>Tile #5</li> 
 
\t \t <li>Tile #7</li> 
 
\t \t <li>Tile #8</li> 
 
\t \t <li class="medium">Tile #9</li> 
 
\t \t <li class="medium">Tile #10</li> 
 
\t \t <li>Tile #11</li> 
 
\t \t <li>Tile #12</li> 
 
\t \t <li class="small">Tile #13</li> 
 
\t \t <li>Tile #14</li> 
 
\t \t <li>Tile #15</li> 
 
\t \t <li>Tile #16</li> 
 
\t \t <li>Tile #17</li> 
 
\t \t <li>Tile #18</li> 
 
\t \t <li>Tile #19</li> 
 
\t \t <li>Tile #20</li> 
 
\t </ul>

Но если вы проверите красные плитки, то выровняйте их правильно, Я могу исправить это с помощью полей (проверьте com но приведет к другой проблеме, если широкая плитка находится в нижнем ряду, а в следующем блоке есть две маленькие плитки,

Также, если есть только одна маленькая плитка, будет создано пустое пространство.

Answer 1

Для начала, я много работаю с flexbox, и мне очень нравится то, чего вы пытаетесь достичь, и измените некоторые мои собственные, чтобы работать так.

Во-вторых, вы не смогли сообщить flexbox, как сгибать элементы li. Определение только width и height на согнутых элементах вынуждает flexbox использовать только эти значения и вообще не является гибким.

ОБНОВЛЕНИЕ

Flexbox строка не может поставить различные коробки размера поверх друг друга на же строки (то же самое верно и для столбцов с Flexbox строк). Это на самом деле означает, что если вам нужно ваше решение, вам понадобится главный столбец с двумя строками (ul) каждый height: 105px и поместите li в любую строку, если это необходимо.

Другим вариантом был бы один Flexbox ряда (ul) с ребенком li-х, которые оберточная Flexbox строки, на самом деле вложенностью small и medium классов.

Я думаю, что выбрал бы второе решение.

Как вы можете видеть из кода, ваш основной «прожектор» стал рядом коробок с каждой коробкой, содержащей 3 элемента: 2 spot и «полоса».

Я удалил ссылку на ul и li элементов, что делает его более гибким. Таким образом, вы можете использовать любой вид контейнера в качестве лайтбокса.

ul,ol,li { list-style: none; padding: 0; margin: 0 } 
 

 
.armature { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
} 
 
.lightstrip { 
 
    height: 210px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    padding: 0; 
 
} 
 

 
.lightbox { 
 
    width: 210px; 
 
    height: 210px; 
 
    
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.spot { 
 
    flex: 1 1 100px; 
 
    height: 100px; 
 
    margin: 2px; 
 
    background-color: rgba(0,255,0,.3); 
 
} 
 
.strip { 
 
    flex: 1 1 200px; 
 
    height: 100px; 
 
    margin: 2px; 
 
    background-color: rgba(255,0,0,.3); 
 
}

<div class="armature"> 
 
    <div class="lightstrip"> 
 
     <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div> 
 
     <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div> 
 
     <div class="lightbox"><div class="strip"></div><div class="spot"></div><div class="spot" ></div></div> 
 

 
     <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul> 
 
     <ul class="lightbox"><li class="strip"></li><li class="spot"></li><li class="spot" ></li></ul> 
 
     <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul> 
 

 
     <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div> 
 
     <div class="lightbox"><div class="spot" ></div><div class="spot"></div><div class="strip"></div></div> 
 
     <div class="lightbox"><div class="strip"></div><div class="spot"></div><div class="spot" ></div></div> 
 

 
     <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul> 
 
     <ul class="lightbox"><li class="strip"></li><li class="spot"></li><li class="spot" ></li></ul> 
 
     <ul class="lightbox"><li class="spot" ></li><li class="spot"></li><li class="strip"></li></ul> 
 
    </div> 
 
</div>