【css】flex展示一排图片

<div class="pics">
			<h1>Album:   </h1>
			<section>
				<h1>pic1</h1>
			</section>
			<section>
				<h1>pic2</h1>
			</section>
			<section>
				<h1>pic3</h1>
			</section>
			<section>
				<h1>pic4</h1>
			</section>
			<section>
				<h1>pic5</h1>
			</section>
		</div>

.pics{
	font: 1.4rem helvetica, sans-serif;
		
	margin: 3rem;
	height: 100%;
	
	/*background: dimgrey;*/
	display: flex;
	align-items: center;
	justify-content: center;
}

section{
	height: 280px;
	margin: 0;
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	flex: 1;
						
	color: silver;
	background-color: hsla(0, 100%, 0%, .9);
	background-size:  auto 100%; 
	box-shadow: 0 0 1.5rem hsla(0, 100%, 0%, .4);
}

section h1 {
	display: none;
	font-size: 1.3rem;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 0 1.2rem hsla(0, 100%, 0%, .8);
	color: white;
	background-color: hsla(0, 100%, 0%, .7);
	margin: 0;
	padding: .8rem;
}

section:nth-of-type(1) {
	background: white url(image/pic1.jpg) no-repeat center ;
	background-size:  auto 100%; 
}
section:nth-of-type(2) {
	background: white url(image/pic2.jpg) no-repeat center;
	background-size:  auto 100%; 	
}	
section:nth-of-type(3) {
	background: white url(image/pic3.jpg) no-repeat center left;	
	background-size:  auto 100%; 
}
section:nth-of-type(4) {
	background: white url(image/pic4.jpg) no-repeat center;
	background-size:  auto 100%; 
}

section:nth-of-type(5) {
	background: white url(image/pic5.jpg) no-repeat center;
	background-size:  auto 100%; 
}
 section:hover h1 {
	display: block;
}

section:hover{
  flex: 2;
  cursor: pointer;
}

传送门：http://www.w3cplus.com/css3/designing-css-layout-with-flexbox.html

p:nth-of-type(……)    表示“选取父元素的为p子元素的第……个”

p:nth-child(……)   表示“选取父元素的第几个子元素，恰为p”

括号里参数：

1   Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

p:nth-child(odd)

2   使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

p:nth-child(3n+0)