css3弹性盒子常用属性

设置为弹性盒：

display:flex; 块级弹性盒
display:inline-flex; 行级弹性盒 （相当于行级块）

flex-direction-作用：描述弹性盒主轴方向（项目的排列方向）

flex-direction: row; 横向【默认从左向右】 
flex-direction: row-reverse; （右对齐)，从后往前排，最后一项排在最前面
flex-direction: column 纵向排列;（默认从上向下） 
flex-direction: column-reverse; 与column反向

<!-- 
     1.设置为弹性盒之后，项目按主轴方向排列（默认从左向右）
     2.弹性盒项目本身大小为自动时，默认横向内容撑开，纵向默认拉伸占满容器
-->

flex-direction-作用：

justify-content: flex-start; 起始点对齐——默认值。
justify-content: flex-end; 终点对齐——弹性项目向行尾紧挨着填充。
justify-content: center; 居中对齐
justify-content: space-between; 容器的剩余空间在项目之间
justify-content: space-around; 项目两侧拥有相等的剩余空间，项目之间是项目与容器之间的2倍
justify-content: space-evenly; 项目与容器，项目与项目之间拥有相等的空间

align-items-设置侧轴方向的对齐方式：

align-items: flex-start; 侧轴起始位置对齐 
align-items: flex-end; 侧轴末端位置对齐 
align-items: center; 侧轴居中对齐 
align-items: baseline; 基线对齐 
align-items: stretch; 拉伸占满侧轴——指定项目在侧轴方向的大小为'auto'时有效 默认值

flflex-wrap-指定弹性盒子的子元素换行方式：

flex-wrap:
        nowrap -不换【默认值】
        wrap  换行（起始点在上）
        wrap-reverse  与 wrap反向 （起始点在下）

align-content-多根轴线的对齐方式：

align-content: stretch;  默认  水平方向
align-content: flex-start;  左对齐
align-content: flex-end;  右对齐
align-content: center;   居中对齐
align-content: space-between;  两端对齐
align-content: space-around;  容器剩余空间在行与行两侧，行与行之间是行与容器之间的两倍
align-content: space-evenly;  行与行之间，行与项目之间容器的剩余空间均等分布

弹性盒项目属性：

/* 默认值为0，值越大排列越靠后 */  order:1;

align-self 属性-设置项目自身在侧轴上的对齐方式:

align-self:  单个项目在侧轴上的对齐方式
align-self:  控制所有项目在侧轴上的对齐方式
align-self:  auto;  自动——为元素的父元素的'align-items'值，
align-self:  flex-start;  起始位置对齐
align-self:  flex-end;  终点位置对齐
align-self:  center;  居中对齐
align-self:  baseline;  基线对齐。
align-self:  stretch;  拉伸占满侧轴——侧轴大小为auto时有效

flex-简写：

作用：用于指定弹性子元素如何分配空间。
flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

flex-grow-作用增长比率：

默认值0  表示即使容器有剩余空间也不增长
数值，表示份数

flex-basis-基准值（参与计算的最终值）：

    <!-- 
                 没有定义基准值，以当前元素宽度、高度为准
                 如果定义了基准值，以基准值为准（flex-basis的优先）

                 计算项目的最终大小

                        计算剩余空间
                        计算增长以后的值
                        计算收缩以后值

     -->

    <!-- 
            计算剩余空间
                    400-50-100-100 = 150

                    1份的大小：150/5 = 30  

            计算增长以后的大小：
                    50 + 30  = 80
                    100 + 30 *2 =  160
     -->

    <!-- 

        剩余空间
            400-100-100-100 =  100

            100/5=20

     -->

    <!-- 
        flex-grow:
            默认值0  表示即使容器有剩余空间也不增长

            数值，表示份数
       
     -->

flex-shrink-定义项目的收缩比率：

    <!-- 

        flex-shrink:
                 收缩比率

                 容器空间不足时，才有效

                    默认值:1  表示当容器空间不足时收缩
                           0 表示不收缩
          
     -->