CSS flex 布局 一些基本属性应用

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

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

box-orient

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

horizontal

vertical

inline-axis

block-axis

box-pack

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

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。

stretch

start

center

end

baseline

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。

normal

reverse

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

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

single

multiple

作用于子元素上：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