.box{
border: 1px solid red;
width:630px;
height: 500px;
display: flex;
margin: 20px auto;
/* 设置主轴方向 */
/* 默认 */
/* flex-direction: row; */
/* flex 默认不换行 从左到右 */
/* flex-wrap: wrap; */
/* flex 默认不换行 从右到左 */
/* flex-direction: column-reverse; */
/* flex 默认不换行 主轴从上到下 */
/* flex-direction: column; */
/* flex-wrap: wrap-reverse; */
/* 复合元素 */
flex-flow: row nowrap;
/* 定义了项目在主轴上的对齐方式 */
/* justify-content: flex-end; 右对齐 */
/* justify-content: flex-start; 左对齐 */
/* 水平居中对齐 */
justify-content: center;
/* 子元素靠边对齐 */
justify-content: space-between;
/* 子元素左右两边的距离保持一致 */
/* justify-content: space-around; */
/* 子元素相邻两边的距离保持一致 */
/* justify-content: space-evenly; */
/* 定义项目交叉轴的对齐方式 */
/* 垂直方向居中 */
/* align-items: center; */
/* 垂直方向的顶部 交叉轴的起点对齐 */
/* align-items: flex-start; */
/* 垂直方向的顶部 交叉轴的终点对齐 */
/* align-items: flex-end; */
/* baseline 项目第一行文字的基线对齐 */
/* 垂直方向按照子元素所在的位置进行对齐 */
