接着上文css3弹性盒模型flex快速入门与上手1继续，上文还剩下两个父容器的属性align-items和align-content.
一、align-content:多行的副轴对齐方式
| 含义 | 多行的副轴对齐方式 |
| 可选值 | stretch | flex-start | center | flex-end | space-between | space-around |
| 默认值 | stretch |
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
即：此属性只在flex容器中有多行flex元素时才有作用.
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局 - by ghostwu</title>
<style>
#box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: stretch; */
/* align-content: space-between; */
/* align-content: space-around; */
height: 400px;
background: #ccc;
} #box div {
width: 100px;
height: 100px;
background: #09f;
margin: 10px;
}
</style>
</head> <body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>
</body> </html>
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
设置了align-content为stretch时，把容器的子元素height变成auto,不要设置固定的高度，才能看见拉伸效果
#box div {
width: 100px;
height: auto;
background: #09f;
margin: 10px;
}
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
把flex-direction变成column方向.
小结：这个属性一定要有多行flex元素，否则看不到效果， 即配合flex-wrap: wrap;让flex元素换行 才能看见效果
align-items：单行的副轴对齐方式
| 含义 | 单行的副轴对齐方式 |
| 可选值 | flex-start | flex-end | center | stretch | baseline |
| 默认值 | stretch |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局 - by ghostwu</title>
<style>
#box {
display: flex;
/* flex-direction: column; */
flex-direction: row;
/* align-items: flex-start; */
align-items: flex-end;
/* align-items: center; */
/* align-items: baseline; */ height:400px;
background:#ccc;
}
#box div {
width: 100px;
height: 100px;
background: #09f;
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
flex-direction: row;
align-items: flex-end;
flex-direction: row;
align-items: flex-start;
flex-direction: row;
align-items: center;
flex-direction: row;
align-items: baseline;
baseline:对齐第一个flex元素文本的基线
#box div:nth-of-type(1) {
padding-top:50px;
}
flex-direction: row;
align-items: stretch;
把所有的flex元素高度设置为auto，或者去掉 才能看见拉伸(stretch)效果:
#box div {
width: 100px;
height: auto;
background: #09f;
margin: 10px;
box-sizing: border-box;
}
