box布局

作者: IT小C | 来源:发表于2016-03-23 22:36 被阅读91次

    盒模型display:box是css3中的新属性

    display: -webkit-box;
    

    1.-webkit-box-direction
    定义子元素的显示方向是正序显示还是倒序

    -webkit-box-direction: normal || reverse;
    

    2.-webkit-box-orient
    水平,垂直排列元素的所有子元素
    horizontal 在水平行中从左向右排列子元素。
    vertical 从上向下垂直排列子元素。

    /* Firefox */
    -moz-box-orient:horizontal;
    
    /* Safari、Opera 以及 Chrome */
    -webkit-box-orient:horizontal;
    
    /* W3C */
    box-orient:horizontal;
    

    3.-webkit-box-pack
    box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素

    -webkit-box-pack: start || center || end;
    

    start
    对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间)
    对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)
    end
    对于正常方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)。
    对于相反方向的框,首个子元素的左边缘被放在左侧(最后子元素后是所有剩余的空间)。
    center
    均等地分割多余空间,其中一半空间被置于首个子元素前,另一半被置于最后一个子元素后
    justify
    在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间)。

    4.-webkit-box-align
    box-align 属性规定如何对齐框的子元素。

    box-align: start|end|center|baseline|stretch;
    

    start
    对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。
    对于反方向的框,每个子元素的下边缘沿着框的底边放置。
    end
    对于正常方向的框,每个子元素的下边缘沿着框的底边放置。
    对于反方向的框,每个子元素的上边缘沿着框的顶边放置。
    center
    均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。
    baseline
    如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。
    stretch
    拉伸子元素以填充包含块

    5.-webkit-box-lines
    设置或检索伸缩盒对象的子元素是否可以换行显示

    -webkit-box-lines: single | multiple;
    

    single 不允许子元素换行
    multiple 允许子元素换行

    6.-webkit-box-flex
    box-flex 属性规定框的子元素是否可伸缩其尺寸。
    提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。
    value
    元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

    相关文章

      网友评论

        本文标题:box布局

        本文链接:https://www.haomeiwen.com/subject/byqrlttx.html