css3-flex-ONE

                css3-盒模型（盒模型实例.html）
大小：　box-sizing
溢出：　overflow-x
溢出：　overflow-y
缩放：　resize
外轮廓：outline
 
A:-------
        css中的每一个元素都是一个盒模型。包括html和body。
        W3C的盒模型标准：
            外盒尺寸计算：    
                element空间高度 = 内容高度 + 内距 + 边框 + 外距
                element空间宽度 = 内容宽度 + 内距 + 边框 + 外距
    
            内盒尺寸计算：
                element高度 = 内容高度 + 内距 + 边框（height为内容高度）
                element宽度 = 内容宽度 + 内距 + 边框（width为内容宽度）
        ＩＥ传统盒模型：（修改　元素边框或者内距，不会影响元素盒子的总尺寸）
            外盒尺寸计算：    
                element空间高度 = 内容高度 + 外距(height包括了内容高度 +内距 + 边框）
                element空间宽度 = 内容宽度 + 外距(width包括了内容高度 +内距 + 边框）
    
            内盒尺寸计算：
                element高度 = 内容高度(height包括了内容高度 +内距 + 边框）
                element宽度 = 内容宽度(width包括了内容高度 +内距 + 边框）
B:-------------
        box-sizing:    事先定义盒模型的解析方式
        用法：
            box-sizing: content-box | border-box | inherit
                content-box:    (默认)维持w3c的标准盒模型。元素的height和width都＝border +padding +内容 width/height
                border-box:    定义为CSS2.1模式。维持ＩＥ传统下盒模型。元素的width和height都＝内容的width/height
                            这里的内容width + height包括了　border+padding+content
                inherit:    继承父元素的盒模型模式
                    firefox中，元素还可以设置一个padding-box.
                            指定元素的宽度或高度　（内容的宽度或高度　＋　内距）
 
                
Ｃ－－－－－－－
        overflow-x,overflow-y    :对水平垂直方向内容溢出的剪贴
        用法：
            overflow-x: visible | hidden | scroll | auto | no-display | no-content
            overflow-y: visible | hidden | scroll | auto | no-display | no-content
                visible:    默认）不剪贴任何内容
                auto:        需要时候剪贴内容并添加滚动条
                hidden:        内容溢出容器时候，内容隐藏，无滚动条哦
                scroll:        有滚动条
                no-display:    内容溢出不显示元素
                no-content:    内容溢出不显示内容
                
Ｄ------------
        
        resize:        自由缩放（通过拖动方式修改元素的尺寸来改变元素的大小）
        用法：    
            resize:    none | both | horizontal | vertical | inherit
                none:        用户不能拖动元素修改尺寸
                both:        改变宽高
                horizontal:    改变宽
                vertical:    改变高
                inherit:    继承父元素
 
Ｅ－－－－－－－
        outline:    外轮廓～border，不占用网页布局空间，不一定为矩形，只有元素在获取焦点或被激活的时候呈现
        用法：
            outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
                color:         颜色，默认黑色
                style:        轮廓线的样式，默认none
                width:        宽度，默认mediun
                offset:        轮廓边框的偏移位置的数值，可以为负数（向内偏移）　，　正数（向外偏移）
                inherit:    继承父元素
 
        outline 和　border：
            ＯＮＥ：　    border属于盒模型一部分，影响盒子的大小。outline创建的外轮廓线类似画在上面，不影响布局大小
            ＴＷＯ：　    outline各边相同，border可以不同
            ＴＨＲＥＥ：    border边框可以单设置，outline闭合
            ＦＯＵＲ：    外轮廓线可以非矩形，如果多行，外轮廓线至少包含该元素所有框的外轮廓
            ＦＩＶＥ：    outline可以向两端扩展
 
----------------------------------------------------------------------------------------------------------------------------
                            css3-伸缩布局盒Flexbox布局
Ａ：－－－－－－－－－－－
    提供一个更有效制定，调整和分布一个容器里面项目布局（即使　未知的或者动态的）
    会使　子项目（伸缩项目）扩展来填满可用空间，或缩小以防止溢出容器）
 
Ｂ：－－－－－－－－－－－
 
    css2.1布局模式：
        块布局：    呈现文档的布局模式
        行内布局：    文本的布局模式
        表格布局：    用格子呈现2d数据的布局模式
        定位布局：    能够直接定位元素的布局模式，定位元素与其他元素没有任何关系
 
Ｃ：－－－－－－－－－－－
    
    Flex布局在定义伸缩项目大小的时候，伸缩容器会预留一些可用空间，可以调节伸缩项目的相对大小和位置。
        １．　屏幕和浏览器窗口大小发生改变也可以灵活的调整布局
        ２．　指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间）
        ３．　指定伸缩项目沿着主轴或测轴将伸缩容器额外空间，分配到伸缩项目之前，之后或者之间
        ４．　指定如何将垂直于元素布局轴的额外空间分布到该元素的周围
        ５．　控制元素在页面上的布局方向
        ６．　按照不同于ＤＯＭ所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序
 
Ｄ：术语－－－－－－－－－
 
    １．主轴侧轴
        主轴、侧轴方向：　用户代理沿着一个伸缩容的主轴配置伸缩项目，主轴是主轴方向的延伸。伸缩容器的主轴，伸缩项目主要沿着这条轴进行布局。
                    不一定水平。取决于justify-content
        主轴起点终点　：　伸缩项目的配置从容器的主轴方向起点边开始，往主轴终点边结束。
        
        主轴长度，长度属性：　伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，主轴长度属性是width还是height，由哪一个对着主轴方向决定。
        
        侧轴、侧轴方向：　与主轴垂直的轴称作侧轴，侧轴是侧轴方向的延伸。主要取决与主轴方向。
        
        侧轴起点终点　：　填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
    
        侧轴长度，长度属性：　伸缩项目的在侧轴方向的宽度或者高度就是项目的侧轴长度，侧轴长度是width还是height，由哪一个对着侧轴决定。
 
    ２．伸缩项目、伸缩容器
        
        ＝＝通过display属性显式给一个元素设置为flex或者inline-flex，这就是一个伸缩容器
        　　～～内容会被创立新的伸缩格式化上下文，其中设置为flex的容器被渲染为一个块级元素，而设置inline-flex的容器则渲染成为一个行内元素，
        　　　　　　~若元素display：inline-flex且元素是一个浮动或绝对定位元素,则display的计算值是flex
        ＝＝一个伸缩容器的内同具有０＋的伸缩项目－伸缩元素中除了需要盒修复的元素之外每个子元素都会成为一个伸缩项目
        　　～～用户代理会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目。
 
    ３．伸缩容器的属性
        
        １）伸缩流方向。　＝伸缩容器的主轴方向，其决定了伸缩项目放置在伸缩容器的方向。
                ＝flex-direction设置，默认row
                ＝与书写模式有关
 
        ２）伸缩行换行。　＝设置伸缩容器伸缩项目单行显示还是多行显示，决定侧轴的方向
                　=　启用溢出的伸缩容器的伸缩项目自动换行到下一行以及控制流动方向    
                　＝flex-wrap设置，默认nowrap
        
        ３）伸缩方向与换行
                ＝伸缩流＋伸缩换行
                ＝flex-flow同时设定了伸缩流方向flex-direction和伸缩换行flex-wrap两个属性
        ４）主轴对齐
                ＝设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间
                
        ５）侧轴对齐
                ＝伸缩项目可以在伸缩容器当前行的侧轴上进行对齐，类似与主轴对齐
                ＝定义伸缩项目在伸缩容器的当前行的侧轴上对齐方式
        ６）堆栈伸缩行
                ＝定义伸缩容器中伸缩项目行在侧轴的对齐方向，类似于侧轴对齐。但用来控制伸缩项目行在布局轴的堆放方式
 
        
    ４．伸缩项目的属性
        －－伸缩容器的子元素
        －－主轴长度：　伸缩项目在主轴上的尺寸
        －－侧轴长度：　伸缩项目在侧轴上的尺寸
        
        １）显示顺序＝可以修改显示顺序　＋　对伸缩项目进行组合排序
            默认　遵循文档在源码中出现的先后顺序（ＤＯＭ结构的先后顺序）
        
        ２）侧轴对齐
            align-items　：　设置伸缩容器中包括匿名项目的对齐方式
            align-self 　：　在单独的伸缩项目上覆写默认的对齐方式，（匿名项目：与其关联的伸缩容器的align-items相同）
 
        ３）伸缩性
            定义伸缩项目可改变他们的宽度或者高度填补可用的空间。
            ＝可将伸缩容器的额外空间分发给其伸缩项目（与伸缩项目的正弹性成正比）
            ＝或将他们缩小以防止伸缩项目溢出
    
    ５．伸缩行
        ＝＝伸缩项目沿着伸缩容器内的一个伸缩行定位
        ＝＝可以多行，也可以单行
            单行：所有子元素在单独的一行上进行布局
            多行：配置多行上面，类似文本排列
            用户代理创建新的伸缩行的时候，这些伸缩行会根据flex-wrap属性沿着侧轴进行堆叠
            ！每一个伸缩行至少包含一个伸缩项目（非空）
        ＝＝flex-wrap决定
        
 
                    
E:-----------------------
    语法变更：
    
主轴对齐方式：　指定伸缩项目沿主轴对齐方式
                                 属性名称        start          center        end                 justify        distribute
    标准版本          justify-pack    flex-start     center        flex-pack       flex-end    space-around
    混合版本                  flex-pack    start         center        end                justify        distribute
    最老版本                 box-pack    start          center        end                justify        N/A
 
侧轴对齐方式：　指定伸缩项目沿侧轴对齐方式
                            属性名称           start          center            end            baseline    stretch
    标准版本       align-items     flex-start     center          flex-end       baseline    stretch
    混合版本         flex-align       start            center          end              baseline    stretch
    最老版本        box-align        start           center          end                baseline    stretch
                
 
 
伸缩项目行对齐方式：　指定伸缩项目行在侧轴的对齐方式
                                  属性名称            start        center           end                 justify                          distribute             stretch
    标准版本       align-content        flex-start    center          flex-end       space-between        space-around        stretch
    混合版本        flex-line-pack          start        center          end                  justify                               distribute        stretch
    最老版本                                                                       N/A        
 
 
单个伸缩项目对齐方式：　指定单个伸缩项目在侧轴方式
                                     属性名称             start           center          end           auto        baseline        stretch
    标准版本                align-self           flex-start      center        flex-end     auto        baseline        stretch
    混合版本                flex-item-align     start             center        end          auto        baseline        stretch
    最老版本                                                                      N/A
 
 
显示顺序：　指定伸缩项目的顺序
                           属性名称                    属性值
    标准版本       order                          <number>
    混合版本          flex-order                <number>
    最老版本    box-ordinal-group        <number>
 
 
伸缩性：　指定伸缩项目如何伸展尺寸
                          属性名称            属性值    
    标准版本    flex                none | [<flex-grow> <flex-shrink> ?|| <flex-basis>]
    混合版本    flex                none | [<pox-flex> <neg-flex> ?|| <perferred-size>]
    最老版本    box-flex            <number>
 
 
伸缩流：　指定伸缩容器主轴的伸缩流方向
                                  属性名称              水平方向            反向水平          垂直方向        反向垂直    
    标准版本            flex-direction        　row                row-reverse       column        column-reverse
    混合版本            flex-derection           row                row-reverse        column        column-reverse
            
                                 box-orient             horizontal         horizontal          vertical           vertical
    最老版本             box-direction         normal               reverse              normal          reverse
 
(搜索引擎Flexbox：    see : 1.display:box / box-{*}　，　09年版本flexbox
            　　　　                     2.display:flexbox / flex() ,  11年版本，混合版本
                                                 3.display:flex / flex-{*}　属性，当前规范    )
                            
                        


                            老版本flex介绍（伸缩布局盒实例1.html）
F:--------------------
    伸缩容器设置display
        display : box | inline-box
            box:        块伸缩容器
            inline-box:     内联级伸缩容器
    =伸缩容器会为其内容创建新的伸缩格式化上下文（Flex formatting context）
    =浮动不影响伸缩容器，伸缩容器的margin与内容的margin不重叠
    =浮动元素　／　绝对定元素设置了内联伸缩容器，元素将会以块伸缩容器展示
 
Ｇ：--------------------
    伸缩流方向box-orient
        box-orient: horizontal | vertical | inline-axis | block-axis
        ＝适用于伸缩容器。
        ＝确定伸缩项目在伸缩容器中的流动布局方向。
            horizontal : 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
            vertical:　　　　伸缩项目从上到下在一条垂直线上排列
            inline-axis: 沿着内联轴排列显示
            block-axis:　　沿着块轴排列显示
        ＝伸缩流方向与书写流方向有关系
 
Ｈ：－－－－－－－－－－
              布局顺序box-direction
                      =伸缩项目在伸缩容器中的流动顺序。
         box-direction: normal | reverse
            noemal: 正常显示顺序。box-orient的值为 horizontal　／　inline-axis时候，从主轴开始按照文档流结构顺序，左到右
            reverse:　反向显示。 eg: box-orient值为horizontal／inline-axis时候，从主轴终点按文档流结构反方向排列
            ！～！显示顺序和文本流顺序：
                当书写模式为 rtl,box-direction：normal， box-orient: horizontal时候，从右向左
        
        
 
Ｉ：－－－－－－－－－－
    伸缩换行box-lines
        =控制伸缩项目是否溢出伸缩容器
        =设置单行多行显示＋决定侧轴方向
    
         box-lines: single | multiple
            single:　一行／一列显示
            multiple: 多行／多列显示
 
 
Ｊ：－－－－－－－－－－
    主轴对齐box-pack
        =在主轴方向上对伸缩容器的额外空间进行管理
        box-pack: start | end | center | justify
            start:    向一行的起始位置靠齐
            center:    向一行的中间位置靠齐
            justify：平均分布在一行中
            end:    向结束位置靠齐
    
    
    侧轴对齐box-align
        =在侧轴方向上对伸缩容器的额外空间进行管理
        box-pack: start | end | center | justify
            start:    伸缩项目顶部边缘放置在伸缩容器的顶端，额外空间放置在伸缩项目底端
            center:    项目紧靠在一起，垂直居中与伸缩容器，平均分配在伸缩项目顶部和底部
            end:    与start相反
            baseline: 伸缩项目根据他们的基线对齐。伸缩容器额外空间可前可后显示
                　　　　基线：取决于box-direction属性的起始边缘和末尾边缘
            stretch:　伸缩项目填充整个伸缩容器
          
k:---------------------
    伸缩性box-flex
        ＝控制伸缩项目在伸缩容器中的显示空间（宽度　＋ 高度）
         =伸缩项目宽度==伸缩容器宽度： 运用在伸缩项目中的宽度是每个伸缩项目的其次宽度
                  >           ： 根据比例制进行收缩
                  <           ： 根据比例制进行扩展
            box-flex: <number>
                ---当容器中包含了多个定义box-flex属性的伸缩项目时候，浏览器会将这些伸缩项目的box-flex值相加。根据值占总值的
                    比例来分配伸缩容器额外的空间给项目。
L：--------------------
    
    显示顺序： box-ordinal-group（自适应三列等高布局旧版flex.html）
        =修改伸缩项目在页面中的显示顺序/ 实线排序组
            box-ordinal-group: <integer> : 默认为1，正整数，设置位置顺序序列号（越大越后面