Sponser Link
Sponser Link
目次
６要素を並べる・１つ目の方法
- liにmargin-right:16px
- ulにmargin-right:-16px
- liの幅はwidth:calc(100%/6 – 16px;)
Sponser Link
HTML
HTML
<section>
<div class="container00">
<ul class="fadein-list">
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
</ul>
</div>
</section>
Sponser Link
CSS
CSS
.fadein-fi {
display: flex;
margin-right: -16px;
flex-wrap: wrap;
justify-content: space-between;
}
.fadein-fi li {
width: calc(100%/6 - 16px);
margin-right: 16px;
}
Sponser Link
６要素を並べる場合・２つ目
- liにflex: 0 1 15%;
- liに :not(:nth-child(6n+1)) 6の倍数＋１じゃない時、１、７、１３じゃない時
- liに :not(:nth-child(-n+6)) １、２、３、４、５、６じゃない時、７以上
- ３要素なら3nにする
Sponser Link
HTML
HTML
<section>
<div class="container00">
<ul class="fadein-list">
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
<li class="animate">
<img src="images/001_archives_aalt.jpg">
<p>AALTO<i>アアルト</i></p>
</li>
</ul>
</div>
</section>
Sponser Link
CSS
CSS
.fadein-list {
max-width: 960px;
margin: 500px auto;
display: flex;
flex-wrap: wrap;
}
.animate {
flex: 0 1 15%;
}
.animate:not(:nth-child(6n+1)) {/*6の倍数＋１じゃない時、７、*/
margin-left: 19px;
}
.animate:not(:nth-child(-n+6)) {/*１、２、３、４、５、６じゃない時、７以上*/
margin-top: 20px;
}
Sponser Link