flex伸缩布局

flex

布局方向 = 设定主轴为X轴或Y轴

项目排列方向=改变主轴正方向

旧版flex

容器

        display : -webkit-box

        -webkit-box-orient(布局方向): horizontal(X轴) , vertical(Y轴)

        -webkit-box-direction(项目排列方向) : normal | reverse

        -webkit-box-pack(确定主轴富裕空间位置) 

        -webkit-box-align(确定侧轴富裕空间位置) 

项目 -webkit-box-flex :默认值0  (设置项目弹性因子 将主轴的富裕空间按比例分配给项目) 

新版flex

项目在主轴的正方向排列

等分布局 简写 属性  flex:1

容器

display:flex

flex-direction:row row-reverse column column-reverse (可以同时设置布局和项目排列方向 =  确定主轴和主轴正方向 )

flex-wrap :nowrap  wrap wrap-reverse 侧轴排列方向

align-content  管理多行时的侧轴富裕空间位置   flex-start flex-end  center space-between space-around  stretch

flex-flow: row wrap  是flex-direction和flex-wrap的简写属性

justify-content : 设置主轴富裕空间位置

align-items :      设置侧轴富裕空间位置 单行时生效

项目

flex-basis 指定元素在主轴上的初始大小 不设置默认以width/height为初始值

flex-grow: 默认值0  (设置项目弹性因子 将主轴的富裕空间按比例分配给项目) 

                  可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)

                  可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)

                  每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))

flex-shrink: 默认值1  收缩因子 (flex-wrap:nowrap单行时生效 )

order: 1     (项目的排列因子, 因子越大顺序越靠后)

align-self : auto flex-end flex-start center baseline stretch(设置项目自身的侧轴富裕空间)