布局 ​

简介 ​

Hummer 中整体基于 flex 布局方式

flex容器属性 ​

flex-direction ​

• flex-direction定义了flex容器中项目的排列方向，定义主轴的方向，默认值是row。

row: 如果存在direction:ltr，则从左到右排布；如果存在direction:rtl，则从右到左排布。
row-reverse: 与flex-direction: row相反
column: 从上到下排列
column-reverse: 从下到上排布

• flex-wrap定义了flex容器中flex成员项一行分布还是多行分布，默认值是nowrap

nowrap: flex成员项一行分布，超出flex容器被隐藏，不换行
wrap: flex成员项多行分布，超出flex容器自动换行
wrap-reverse: 行为类似于wrap，排布方向与其相反

• justify-content定义了flex成员项在主轴方向上如何排列, 默认值是flex-start

flex-start：所有的 flex 成员项都排列在容器主轴的前部
flex-end：则意味着成员项排列在容器主轴的后部
center：即中间对齐，成员项排列在容器中间、两边留白
space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间
space-around: 每个 flex 成员项两侧的空白相等

如图：

• align-items定义了 flex 容器中 flex 成员项在交叉轴方向上如何排列, 默认值为 stretch

flex-start: 交叉轴起点对齐
flex-end: 交叉轴终点对齐
center: 在交叉轴方向上居中对齐
baseline: flex成员项的第一行文字的基线对齐
stretch: 如果flex成员项没有设置高度或者设置成auto,将占满整个容器的高度

• flex-flow 属性, Tenon-Vue不支持。

• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，即flex-wrap:wrap时生效，默认值时flex-start。

flex-start: 交叉轴起点对齐
flex-end: 交叉轴终点对齐
center: 交叉轴中点对齐
stretch: flex成员项没有设置高度或者auto时， 轴线占满整个交叉轴
space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

flex成员项属性 ​

• order属性，不支持。

• flex-grow属性定义flex成员项的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有flex成员项的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个flex成员项的flex-grow属性为2，其他flex成员项都为1，则前者占据的剩余空间将比其他flex成员项多一倍。

• flex-shrink属性定义了flex成员项的缩小比例，默认为1，即如果空间不足，flex成员项等比例缩小。如果一个flex成员项的flex-shrink属性为0，其他flex成员项都为1，则空间不足时，前者不缩小。

• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。不支持auto代替 1 1 auto， 不支持none代替 0 0 auto

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。

auto:继承父元素的align-items属性
flex-start: 交叉轴起点对齐
flex-end: 交叉轴终点对齐
center: 在交叉轴方向上居中对齐
baseline: flex成员项的第一行文字的基线对齐
stretch: 如果flex成员项没有设置高度或者设置成auto,将占满整个容器的高度