015 HTML+CSS(Class184 - )

            flex弹性盒模型

                2009年。W3C提出一种新的方案---flex布局，可以简便，完整，响应式的实现各种布局。

                目前他已经得到了所有的浏览器的支持，这意味着，这项功能可以被安全使用

                作用在flex容器上的属性                              作用在flex子元素上的属性

                    　　flex-direction                                       　　order

                 　　   flex-wrap                                        　　    flex-grow

              　　      flex-flow                                        　　     flex-shrink

              　　      justify-content                                 　　   flex-bais

               　　     align-items                                    　　     flex

               　　     align-content                                      　　aglin-self

            作用在flex容器上的属性

                    【注】当父元素display：flex时，子元素的margin：auto会实现上下左右居中的效果

                1. flex-direction:      控制子项整体布局的方向

                        参数：

                            row             默认值，显示为行，从左向右

                            row-reverse     显示为行，从右向左

                            row             显示为列，从上向下

                            row-reverse     显示为列，从下向上

                2. flex-wrap:           控制子项单行显示还是换行显示

                        参数：

                            nowrap          默认值，表示单行显示，不换行

                                            【注】当内容足够在一行显示时，会自动调整宽度尽量显示，实在显示不了再一溢出

                            wrap            宽度不足换行显示

                            wrap-reverse    宽度不足换行显示，但是行是从下往上，即第一行在最下面

                3. flex-flow:           flex布局的flow流动特性，实际上是flex-direction和flex-wrap的缩写

                                        第一个值表示方向，第二个值表示换行，中间用空格隔开

                        参数：

                            row wrap    从左向右以行显示，并且宽度不够时自动折行

                4. justify-content:     决定主轴方向上子项的堆砌和分布方式(主轴方向即flex-direction确定的方向)

                        参数：

                            flex-start:         默认值，表示从起始位置对齐

                            flex-end:           表示从结束位置对齐

                            center:             表示居中对齐

                            space-between:      表示两端对齐，多余的空白部分在元素中间均匀分配

                            space-around:       每个子项周围均匀分配空白部分(如：1子项11子项1)

                            space-evenly:       空白部分在各个子项之间均匀分配(如：1子项1子项1)

                5. align-iems:          决定子项相对于flex父容器在侧轴上的对齐方式

                                        【注】所谓侧轴，即与主轴相垂直的轴

                        参数：

                            strech:             默认值，flex子项拉伸

                            flex-start:         表现为容器顶部对齐

                            flex-end:           表现为容器底部对齐

                            center:             表现为容器垂直居中对齐

                6. aglin-content:       针对于多行的操作，与justify-content效果相似。

                        参数：

                            strech:             默认值，每一行flex子项等比例拉伸，如果有两行，则每行拉伸高度为50%

                            flex-start:         表现为容器顶部对齐

                            flex-end:           表现为容器底部对齐

                            center:             表现为容器垂直居中对齐

                            space-between:      表示两端对齐，多余的空白部分在元素中间均匀分配

                            space-around:       每一行享有独立且不重叠的空白空间

                            space-evenly:       每行元素都完全上下等分

            作用在flex子项上的属性

                1. order:               子项order值可以改变某一个flex子项的排序位置

                                        默认每个子项的order值为0,值越小越靠前

                2. flex-grow:           拓展子项宽度, 按比例占用剩余空白的空间，取值为0-1

                                        当多个子项均有flex-grow设置时，按比例分配给这些子项空白区域

                3. flex-shrink:         当容器空间不足时，进行子元素收缩，取值为0-1, 默认值为1

                4. flex-basis:          定义在分配剩余空间之前，元素的默认大小。

                        参数：

                            像素值

                5. flex:                为flex-grow flex-shrink flex-basis的复合写法

                6. align-self:          单独控制某一个子项的处置对齐方式

                        参数：

                            flex-start  表现为容器顶部对齐

                            flex-end    表现为容器底部对齐

                            center      表现为容器垂直居中对齐