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，越小越靠前。
       
        盒子阴影 box-shadow
        文字阴影 text-shadow
        渐变的背景色： background:linear-gradient(起始位置，颜色，颜色) url();
       
弹性盒布局的大致步骤：
        第1步，给父盒子添加display:flex;
        第2步，确定子元素的排列方向，设置父元素的主轴方向flex-direction:row column。
        第3步，确定子元素的对齐方式，设置给父元素。
                        1》主轴方向对齐，justify-content
                        2》侧轴方向对齐
                                1》当行子元素，align-items
                                2》多行子元素，align-content
        第4步，确定子元素的大小（占剩余空间的份数）
                        flex，注意加给子元素本身。
                        份数的计算方式：所有兄弟子元素flex值的和就是总份数。
                       
        区分：
                1）子元素排列方向和对齐方式
                2）是给父元素添加样式，还是给子元素添加样式

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，越小越靠前。
       
        盒子阴影 box-shadow
        文字阴影 text-shadow
        渐变的背景色： background:linear-gradient(起始位置，颜色，颜色) url();
       
弹性盒布局的大致步骤：
        第1步，给父盒子添加display:flex;
        第2步，确定子元素的排列方向，设置父元素的主轴方向flex-direction:row column。
        第3步，确定子元素的对齐方式，设置给父元素。
                        1》主轴方向对齐，justify-content
                        2》侧轴方向对齐
                                1》当行子元素，align-items
                                2》多行子元素，align-content
        第4步，确定子元素的大小（占剩余空间的份数）
                        flex，注意加给子元素本身。
                        份数的计算方式：所有兄弟子元素flex值的和就是总份数。
                       
        区分：
                1）子元素排列方向和对齐方式
                2）是给父元素添加样式，还是给子元素添加样式