交叉轴：主轴垂直方向，默认垂直 起点上面
设置元素在交叉轴上的对齐方式
flex-start 默认值 交叉轴起点
flex-end 交叉轴末端
center 居中
baseline 文本内容 基线对齐(文本对齐)
stretch 子元素不设置高度，拉伸子元素高度到父元素内容高度
</div>
<style>
.wraper {
width: 400px;
height: 500px;
border: 3px solid red;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: stretch;
/* align-items: baseline; */
/* 文字基线对齐*/
}
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 2px solid black;
}
.pad {
padding-top: 30px;
padding-left: 15px;
margin-left: -15px;
}
</style>
