排序和排方向
flex-direction 水平排列
flex-wrap 多行/单行控制
flex-flow 水平排列方向控制
order 控制元素出现位置
对齐
justify-content 行方向排列
align-items 列方向排列
align-self 列方向排列对齐
align-content 列收对齐
display: flex;
/*转为flex 默认水平方向禁止换行*/
/*flex-direction: 排列方向/*
flex-direction: row;/*按水平方向，允许换行*/
flex-direction: row-reverse;/*按照水平方向，反向排列*/
flex-direction: column;/*按垂直方向，允许换行*/
flex-direction: column-reverse;/*按垂直方向，反向排列*/
/*flex-wrap：控制单行或者多行*/
flex-wrap:nowrap; /*单行*/
flex-wrap: wrap;/*多行*/
flex-wrap: wrap-reverse;/*反向多行排列*/
/* flex-flow： 控制排列方向和换行方向*/
flex-flow:row nowrap ;/*水平方向，禁止换行 */
flex-flow: column-reverse;/*垂直方向，反向排列*/
flex-flow: column wrap; /*垂直方向，允许换行*/
flex-flow: row-reverse wrap-reverse; /*水平方向，反向多行排列*/
/* orde:可以控制flex子元素出现的位置 order的属性值为数字，值小靠前 可为负数 */
/* order:-1;控制3到第一位*/
/* justify-content: 水平方向排列 */
justify-content: flex-start;/*沿水平起始方向排列*/
justify-content: flex-end;/*沿水平方向末端开始排列*/
justify-content: center;/*水平方向居中*/
justify-content: space-between;/*水平方向平均分布*/
justify-content: space-around;/*水平方向居中排列*/
/* align-items:垂直方向排列 */
align-items: flex-start;/*沿垂直起始方向排列*/
align-items: flex-end;/*沿垂直末端方向排列*/
align-items: center;/*沿垂直居中方向排列*/
align-items: stretch;/*沿垂直拉伸排列*/
/* align-content 同上多行控制 */
align-content: flex-start;/*紧挨前一行向列对齐*/
align-content: flex-end;/*紧挨后一行向列对齐*/
align-content: center;/*居中填充*/
align-content: space-between;/*上下俩端靠齐*/
align-content: space-around; /*平均分布*/
align-content: stretch;/*填充高度*/
/* align-self垂直方向对其 */
flex:0 0 100px;/*控制是否可以放大 缩小 宽度*/
