zoukankan      html  css  js  c++  java
  • CSS flex 布局 一些基本属性应用

    作用于伸缩盒元素上的属性

    box-orient 、box-pack、box-align、box-direction、box-lines


    box-orient

        box-orient:horizontal | vertical | inline-axis | block-axis
            默认值:horizontal
            适用于:伸缩盒容器
            继承性:无
            动画性:否
            计算值:指定值
    
    

    box-pack

        box-pack:start | center | end | justify
            默认值:start
            适用于:伸缩盒容器
            继承性:无
            动画性:否
            计算值:指定值
        取值:
            start:
            设置伸缩盒对象的子元素从开始位置对齐(大部分情况等同于左对齐,受)
            center:
            设置伸缩盒对象的子元素居中对齐
            end:
            设置伸缩盒对象的子元素从结束位置对齐(大部分情况等同于右对齐)
            justify:
            设置或伸缩盒对象的子元素两端对齐
    
    

    box-algin

        box-align:start | end | center | baseline | stretch
            默认值:stretch
            适用于:伸缩盒容器
            继承性:无
            动画性:否
            计算值:指定值
        取值:
            start:
            设置伸缩盒对象的子元素从开始位置对齐
            center:
            设置伸缩盒对象的子元素居中对齐
            end:
            设置伸缩盒对象的子元素从结束位置对齐
            baseline:
            设置伸缩盒对象的子元素基线对齐
            stretch:
            设置伸缩盒对象的子元素自适应父元素尺寸
        说明:
            设置或检索伸缩盒对象的子元素的对齐方式。查看其兄弟属性box-pack,两者的效果正好(相反)互补
            效果等同于过渡版本的flex-align属性和新版本的align-items属性;
            box-align的对齐方式受box-orient影响;
            默认情况下(即box-orient设置为horizontal)start和end所呈现的效果等同于顶部对齐和底部对齐;
            当box-orient设置为vertical时,start和end所呈现的效果等同于左对齐和右对齐;
            对应的脚本特性为boxAlign。
    
    

    box-direction

        box-direction:normal | reverse
            默认值:normal
            适用于:伸缩盒容器
            继承性:无
            动画性:否
            计算值:指定值
        取值:
            normal:
            设置伸缩盒对象的子元素按正常顺序排列
            reverse:
            反转伸缩盒对象的子元素的排列顺序
        说明:
            设置或检索伸缩盒对象的子元素的排列顺序是否反转。
            可以通过box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果;
            可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果;
            可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果;
            可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果;
            Firefox设置box-direction为reverse时,在将元素的排列顺序反转的同时也将元素的对齐方式逆转了;Safari和Chrome则只是反转元素排列顺序
            对应的脚本特性为boxDirection。
    
    

    box-lines :主要决定子元素是否允许换行

        box-lines:single | multiple
            默认值:single
            适用于:伸缩盒容器
            继承性:无
            动画性:否
            计算值:指定值
        取值:
            single:
            伸缩盒对象的子元素只在一行内显示
            multiple:
            伸缩盒对象的子元素超出父元素的空间时换行显示
        说明:
            设置或检索伸缩盒对象的子元素是否可以换行显示。
            效果类似于过渡版本和新版本的flex-wrap属性;
            对应的脚本特性为boxLines。
    
    

    作用于子元素上:box-ordinal-group 、 box-flex-group

    box-ordinal-group

        box-flex-group:
        默认值:1
        适用于:伸缩盒子元素
        继承性:无
        动画性:否
        计算值:指定值
        取值:
        :
            用整数值来定义伸缩盒对象的子元素所在的组。
            说明:
            设置或检索伸缩盒对象的子元素的所属组。
            动态给数值较大的组分配其内容所需的实际空间(如无内容、padding、border则不占空间),剩余空间则均分给数值最小的那个组(可能有1个或多个元素)
            对应的脚本特性为boxFlexGroup。
    
    

    box-ordinal-group

        box-ordinal-group:
            默认值:1
                适用于:伸缩盒子元素
                继承性:无
                动画性:否
                计算值:指定值
            取值:
                :
                    用整数值来定义伸缩盒对象的子元素显示顺序。
            说明:
                设置或检索伸缩盒对象的子元素的显示顺序。
                效果等同于过渡版本的flex-order属性和新版本的order属性;
                数值较低的元素显示在数值较高的元素前面;
                相同数值的元素,它们的显示顺序取决于它们的代码顺序;
                对应的脚本特性为boxOrdinalGroup。
    
    
    1
    2
    3
  • 相关阅读:
    mysql 索引
    mysql binlog相关知识
    分布式系统日志
    学习路线
    分布式学习
    工具
    关于java面试
    mysql悲观锁总结和实践(转)
    app技术博客整理
    Java编程一些经验
  • 原文地址:https://www.cnblogs.com/czhyuwj/p/5775133.html
Copyright © 2011-2022 走看看