align-items（适用单行）
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排序 |
| flex-end | 终点开始依次排序 |
| center | 沿侧轴居中对齐 |
| stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器（前提是弹性盒子不给高） |
测试案例效果
测试案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
margin: 100px auto;
display: flex;
width: 400px;
height: 400px;
border: 1px solid #000;
/* 沿侧轴居中对齐 */
align-items: center;
/* stretch 弹性盒子沿着侧轴被拉伸至容器铺满 */
/* align-items: stretch; */
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
align-content （适用多行）
| flex-start | 默认值在侧轴头部开始 |
| flex-end | 从侧轴底部开始 |
| center | 侧轴居中 |
| space-around | 侧轴方向平分剩余空间 |
| space-between | 子项先到侧轴两头，再平分剩余空间 |
| stretch | 子项元素平分弹性容器侧轴的高度，前提弹性盒子不给高 |
案例测试效果
测试案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
margin: 100px auto;
display: flex;
width: 502px;
height: 500px;
border: 1px solid #000;
flex-wrap: wrap;
/* flex-start默认值在侧轴头部开始 flex-end 从侧轴底部开始 */
align-content: flex-start;
/* align-content: flex-end; */
/* 侧轴居中 */
/* align-content: center; */
/* 侧轴方向平分剩余空间 */
/* align-content: space-around; */
/* 子项先到侧轴两头，再平分剩余空间 */
/* align-content: space-between; */
/* 子项元素平分弹性容器侧轴的高度 */
/* align-content: stretch; */
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="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>
</body>
</html>
