关闭

css3-flex-two

标签: css3
154人阅读 评论(0) 收藏 举报
 
                            老版本flex介绍(伸缩布局盒实例1.html)
F:--------------------
    伸缩容器设置display
        display : box | inline-box
            box:        块伸缩容器
            inline-box:     内联级伸缩容器
    =伸缩容器会为其内容创建新的伸缩格式化上下文(Flex formatting context)
    =浮动不影响伸缩容器,伸缩容器的margin与内容的margin不重叠
    =浮动元素 / 绝对定元素设置了内联伸缩容器,元素将会以块伸缩容器展示
 
G:--------------------
    伸缩流方向box-orient
        box-orient: horizontal | vertical | inline-axis | block-axis
        =适用于伸缩容器。
        =确定伸缩项目在伸缩容器中的流动布局方向。
            horizontal : 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
            vertical:    伸缩项目从上到下在一条垂直线上排列
            inline-axis: 沿着内联轴排列显示
            block-axis:  沿着块轴排列显示
        =伸缩流方向与书写流方向有关系
 
H:----------
    布局顺序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时候,从右向左
        
        
 
I:----------
    伸缩换行box-lines
        =控制伸缩项目是否溢出伸缩容器
        =设置单行多行显示+决定侧轴方向
    
         box-lines: single | multiple
            single: 一行/一列显示
            multiple: 多行/多列显示
 
 
J:----------
    主轴对齐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
        
G:----------
    堆栈伸缩行:(多行有效)
        flex-line-pack:        调整伸缩行在伸缩容侧轴里的对齐方式
            flex-line-pack:    start | end | center | justify | distribute | stretch


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



            
                        新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:    拉伸填充整个伸缩容器
G:----------
    堆栈伸缩行:(多行有效)
        align-content:        调整伸缩行在伸缩容器里面的对齐方式
            align-content:    flex-start | flex-end | center | space-between | space-around | stretch


H:---------
    伸缩性:    指定可以伸缩的部件: 扩展比率、收缩比率、伸缩基准值
        flex: none | [<'flex-grow'> <'flex-shrink'> <'flex-basic'>]    
            flex-grow: <number>默认为0
            flex-shrink: <number> 默认为1,可 负值
            flex-basis: <length> | auto(默认)
G:---------
    
    显示顺序:    order
        order: <number>
        


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7499次
    • 积分:342
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条