1

我想用没有 JS 的纯 css 创建新闻水平滚动图块滑块
水平滚动磁贴滑块

我尝试使用 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;
  /*
				 * Idea to fix it, but will cause
				 * issue if the medium tile in the
				 * bottom level, and there are 2 small
				 * tiles next to it in the top level
				*/
  /* & + .small + .small{
					display: block;
					clear: both;
					justify-content: bottom;
					margin-top: 120px;
					margin-left: -110px;
				} */
}
.spotlight-wrapper .spotlight li.red {
  background: red;
}
<div class="spotlight-wrapper">
	<ul class="spotlight">
		<li>Tile #1</li>
		<li class="small">Tile #2</li>
		<li class="small">Tile #3</li>
		<li class="medium">Tile #9</li>
		<li class="medium">Tile #10</li>
		<li>Tile #2</li>
		<li class="medium red">Tile #1</li>
		<li class="small red">Tile #2</li>
		<li class="small red">Tile #3</li>
		<li>Tile #5</li>
		<li>Tile #7</li>
		<li>Tile #8</li>
		<li class="medium">Tile #9</li>
		<li class="medium">Tile #10</li>
		<li>Tile #11</li>
		<li>Tile #12</li>
		<li class="small">Tile #13</li>
		<li>Tile #14</li>
		<li>Tile #15</li>
		<li>Tile #16</li>
		<li>Tile #17</li>
		<li>Tile #18</li>
		<li>Tile #19</li>
		<li>Tile #20</li>
	</ul>

但是，如果您检查红色瓷砖，它的对齐方式不正确，我可以使用边距修复它（检查注释块）但如果宽瓷砖位于底行，并且有 2 个小瓷砖在下一个街区，

此外，如果只有一小块瓷砖，则会创建空白空间。

4

1 回答 1

1

对于初学者，我在 flexbox 上做了很多工作，我非常喜欢你想要实现的目标，并且会修改我自己的一些东西来像这样工作。

其次，你没有告诉 flexbox 如何伸缩li元素。仅定义width和定义heightflexed 元素会强制 flexbox 仅使用这些值，并且根本不灵活。

更新

flexbox 行不能将不同大小的盒子放在同一行的顶部（对于带有行的 flexbox 列也是如此）。这实际上意味着，如果您想要您的解决方案，您将需要一个主列，ul每列有 2 行 () height: 105px，并在适当的情况下放入li任一行。

另一种选择是一个ul带有 child 的单个 flexbox 行 ( ) 用于li包装 flexbox 行，实际上是嵌套small和medium类。

我想我会选择第二种解决方案。

正如您从代码中看到的，您的主“灯条”已变成一排盒子，每个盒子包含 3 个元素：2spot和一个“条”。

我删除了对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>

于 2015-12-27T15:51:37.680 回答