flex 元素

排序和排方向

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;/*控制是否可以放大 缩小 宽度*/