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 つの小さなタイルが下の行にある場合は、他の問題が発生します。次のブロック、

また、小さなタイルが 1 つしかない場合は、空きスペースが作成されます。

4

1 に答える 1

1

手始めに、私はフレックスボックスをよく使っています。あなたが達成しようとしていることはとても気に入っています。そのように動作するように、私自身のいくつかのことを変更します。

li第二に、要素をフレックスする方法をフレックスボックスに伝えることができませんでした。onlywidthおよびheighton flexed 要素を定義すると、flexbox はこれらの値のみを使用するようになり、まったく柔軟ではなくなります。

アップデート

フレックスボックスの行では、同じ行に異なるサイズのボックスを重ねることはできません(行を含むフレックスボックスの列についても同様です)。これは実際には、ソリューションが必要な場合は、ulそれぞれ 2 行 ( )のメイン列が必要であり、必要に応じていずれかの行にheight: 105px配置する必要があることを意味しliます。

別のオプションは、flexbox の行をラップしている child を持つ単一の flexbox の行 ( ul) でli、実際にはネストsmallとmediumクラスです。

私は2番目の解決策を選ぶと思います。

コードからわかるように、メインの「ライトストリップ」はボックスの行になり、各ボックスには 2 つspotの要素と「ストリップ」の 3 つの要素が含まれています。

uland要素への参照を削除して、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 に答える