flex布局
flex布局的作用：
        给父元素添加display:flex;属性，控制子元素的位置和排列方式。
        父元素：容器。
        子元素：项目。
       

控制子元素的排列方式 和 大小。

通过给父元素添加样式，来控制子元素的排列方式。
        排列方式：
                1）排列方向【主轴方向】（flex-direction）
                        父元素默认有2个轴（水平方向、垂直方向）
                       
                        子元素根据【主轴方向】进行排列。
                        默认主轴为 row，可以人为设置主轴。
                       
                        flex-direction属性的取值有：row【默认值】、row-reverse、column、column-reverse。                       
                2）在【主轴方向上的对齐方式】（justify-content）
                        （【1】左对齐、【2】右对齐、【3】居中对齐、【4】均匀分布、【5】先两边贴边，然后再中间均匀分布）
                        justify-content属性的取值有：flex-start、flex-end、space-around、space-between。
                       
                3）主轴上排列不下时，【是否换行】 flex-wrap
                        flex-wrap属性的取值有：nowrap【默认值】、wrap
               
                4）【单行子元素侧轴方向的对齐方式】align-items
                        align-items属性的取值有：flex-start、flext-end、center
                       
                5）【多行子元素侧轴方向的对齐方式】align-content
                        align-content属性的取值有：flex-start、flext-end、center、space-between、space-around
                       
通过给子元素添加样式 flex，控制子元素本身的缩放。
        前提：有剩余空间时！
        作用：
                放大当前元素的宽度，设置当前元素占据剩余空间的比例值（份数）。
        比例值的计算：
                当前父元素中，所有兄弟元素 flex值的和（即总份数）。
                如果没有设置flex，则默认为 0（即子元素不会去占据剩余空间）。
               
通过给子元素添加样式，控制子元素的排列顺序。
        order,默认值0，越小越靠前。
align-self控制子项自己在侧轴上的排列


flex布局原理
flex-direction：设置主轴的方向     column 从上到下
justify-content：设置主轴上的子元素排列方式
                       flex-flex    从尾部开始排列
                       center   在主轴居中对齐（如果主轴是X轴则  水平居中）
                       space-around   平分剩余空间
                       space-between 先贴两边再平分剩余空间
flex-wrap：wrap    设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
                     flex-end 在侧轴尾部开始排列
                     center    在侧轴中间显示
                      space-around   子项在侧轴平分剩余空间
                       space-between 子项在侧轴先贴两边再平分剩余空间
                       strech   设置子项元素高度平分父元素高度
align-items：设置侧轴上的子元素排列方式（单行）
                   flex-start 从头部开始
                   flex-end 从尾部开始
                    center 居中显示
                   stretch 拉伸
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
align-self控制子项自己在侧轴上的排列方式
order 属性定义项目的排列顺序

flex布局
flex布局的作用：
        给父元素添加display:flex;属性，控制子元素的位置和排列方式。
        父元素：容器。
        子元素：项目。
       

控制子元素的排列方式 和 大小。

通过给父元素添加样式，来控制子元素的排列方式。
        排列方式：
                1）排列方向【主轴方向】（flex-direction）
                        父元素默认有2个轴（水平方向、垂直方向）
                       
                        子元素根据【主轴方向】进行排列。
                        默认主轴为 row，可以人为设置主轴。
                       
                        flex-direction属性的取值有：row【默认值】、row-reverse、column、column-reverse。                       
                2）在【主轴方向上的对齐方式】（justify-content）
                        （【1】左对齐、【2】右对齐、【3】居中对齐、【4】均匀分布、【5】先两边贴边，然后再中间均匀分布）
                        justify-content属性的取值有：flex-start、flex-end、space-around、space-between。
                       
                3）主轴上排列不下时，【是否换行】 flex-wrap
                        flex-wrap属性的取值有：nowrap【默认值】、wrap
               
                4）【单行子元素侧轴方向的对齐方式】align-items
                        align-items属性的取值有：flex-start、flext-end、center
                       
                5）【多行子元素侧轴方向的对齐方式】align-content
                        align-content属性的取值有：flex-start、flext-end、center、space-between、space-around
                       
通过给子元素添加样式 flex，控制子元素本身的缩放。
        前提：有剩余空间时！
        作用：
                放大当前元素的宽度，设置当前元素占据剩余空间的比例值（份数）。
        比例值的计算：
                当前父元素中，所有兄弟元素 flex值的和（即总份数）。
                如果没有设置flex，则默认为 0（即子元素不会去占据剩余空间）。
               
通过给子元素添加样式，控制子元素的排列顺序。
        order,默认值0，越小越靠前。
align-self控制子项自己在侧轴上的排列


flex布局原理
flex-direction：设置主轴的方向     column 从上到下
justify-content：设置主轴上的子元素排列方式
                       flex-flex    从尾部开始排列
                       center   在主轴居中对齐（如果主轴是X轴则  水平居中）
                       space-around   平分剩余空间
                       space-between 先贴两边再平分剩余空间
flex-wrap：wrap    设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
                     flex-end 在侧轴尾部开始排列
                     center    在侧轴中间显示
                      space-around   子项在侧轴平分剩余空间
                       space-between 子项在侧轴先贴两边再平分剩余空间
                       strech   设置子项元素高度平分父元素高度
align-items：设置侧轴上的子元素排列方式（单行）
                   flex-start 从头部开始
                   flex-end 从尾部开始
                    center 居中显示
                   stretch 拉伸
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
align-self控制子项自己在侧轴上的排列方式
order 属性定义项目的排列顺序