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(设置项目自身的侧轴富裕空间)
