css3-flex-two

 
                            老版本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，正整数，设置位置顺序序列号（越大越后面
 
        
                        混合版本flex介绍（伸缩布局盒实例2.html）


A：--------------------主要用于IE10
    display: flexbox | inline-flexbox
        flexbox :     块级伸缩容器
        inline-flexbox: 内联级伸缩容器


B:---------------------
    伸缩流方向: flex-direction
        -ms-flex-direction: row | row-reverse | column | column-reverse
            row： ltr排版方式下从左到右排列； rtl从右到左
        row-reverse： 与row相反
             column： 从上到下类似与row
         column-reverse： 与column相反
    

C:---------------------
    伸缩换行：    flex-wrap
        flex-wrap : nowrap | wrap | wrap-reverse
            nowrap: 单行显示
            wrap:   多行显示
        wrap-reverse：  多行显示ltr从右到左。 rtl从左到右


D：-------------------
    伸缩流方向 + 换行
        flex-flow: <flex-direction> || <'flex-wrap'>
            
E：-------------------
    主轴对齐：
        flex-pack： start | end | center | justify | distribute
        
F:---------------------
    侧轴对齐：
        flex-align : start | end | center | baseline | stretch
        
Ｇ：－－－－－－－－－－
    堆栈伸缩行：(多行有效）
        flex-line-pack：        调整伸缩行在伸缩容侧轴里的对齐方式
            flex-line-pack:    start | end | center | justify | distribute | stretch


Ｈ：－－－－－－－－－
    伸缩性：    指定可以伸缩的部件：　扩展比率、收缩比率、伸缩基准值
        flex: none | [<positive-flex> <negative-flex> <perferred-size>]    
            positive: 正弹性的正整数/0。　忽略为１
            negative: 负弹性的正整数/0。　忽略为１．
            perferred:伸缩项目的首选大小，可以为width或者height 的任何有效值。包括inherit。默认０px。auto首选为该项目的width和height
Ｇ：－－－－－－－－－
    
    显示顺序：    flex-order
        order: <integer> 默认为０（越大越排在后面）
        



            
                        新flex介绍（伸缩布局盒实例2.html）
A：-------------------
    display: flex | inline-flex

B:--------------------
    伸缩流方向：    
        flex-direction: row | row-reverse | column | column-reverse

            row： ltr排版方式下从左到右排列； rtl从右到左
        row-reverse： 与row相反
             column： 从上到下类似与row
         column-reverse： 与column相反

C：-------------------
    伸缩换行：
        flex-wrap: nowrap | wrap | wrap-reverse
            nowrap: 单行显示
            wrap:   多行显示
        wrap-reverse：  多行显示ltr从右到左。 rtl从左到右

D：-------------------
    伸缩流方向 + 换行
        flex-flow: <'flex-direction'> || <'flex-wrap'>
            flex-flow属性与 writing-mode 有直接关系。
                ---当使用writing-mode：vertical-rl 时候转向垂直布局（竖排）， flex-flow：row将转向垂直排列伸缩项目
E：-------------------
    主轴对齐：
        justfy-content： flex-start | flex-end | center | space-between | space-around
            flex-start: 起始位置靠齐
            flex-end:   末端位置靠齐
            center:        中间位置靠齐
            space-between:平均的分布在行里，第一个在开始，最后一个在结尾　类似与旧版本的jusify
            space-around:平均分布在行里，两端保留一半的空间  distribute

F:---------------------
    侧轴对齐：
        align-items和align-self
        align-items:　伸缩项目行在侧轴的对齐方式
        align-self:  伸缩项目自身在侧轴的对齐方式

            align-items: flex-start | flex-end | center | baseline | stretch
                flex-start: 在侧轴起点边的外边距紧靠该行在侧轴起始边
                flex-end:   侧轴终点边的外边距靠住该行的侧轴终点边
                center :    侧轴上居中放置
                baseline:　　　根据伸缩项目的基线对齐
                stretch:    拉伸填充整个伸缩容器
Ｇ：－－－－－－－－－－
    堆栈伸缩行：(多行有效）
        align-content：        调整伸缩行在伸缩容器里面的对齐方式
            align-content:    flex-start | flex-end | center | space-between | space-around | stretch


Ｈ：－－－－－－－－－
    伸缩性：    指定可以伸缩的部件：　扩展比率、收缩比率、伸缩基准值
        flex: none | [<'flex-grow'> <'flex-shrink'> <'flex-basic'>]    
            flex-grow: <number>默认为０
            flex-shrink:　<number>　默认为１，可　负值
            flex-basis:　<length> | auto(默认）
Ｇ：－－－－－－－－－
    
    显示顺序：    order
        order: <number>