015 HTML+CSS(Class184 - )

[A] flex弹性布局

            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      表现为容器垂直居中对齐

 
 
[B] flex案例
    1. 骰子 的点数
    2. 两列固定,一列自适应
    3. 百度弹性导航
 
 
 
 
 
 
 

015 HTML+CSS(Class184 - )

上一篇:mysql里的转化函数


下一篇:数据库02-经典50个SQL语句01(持续更新中)