微信小程序开发-flex局部

flex布局

flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，和用于设置项目两部分。

设置容器的属性有：

display: flex;
flex-direction: row(默认值) | row-reverse | column | column-reverse;
flex-wrap: nowrap(默认值) | wrap | wrap-reverse;
justify-content: flex-start(默认值) | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch(默认值) | center | flex-end | baseline | flex-start;
align-content: stretch(默认值) | flex-start | center | flex-end | space-between | space-around | space-evenly;

设置项目的属性值有：

order: 0(默认值) | ;
flex-shrink: 1(默认值) | ;
flex-grow: 0(默认值) | ;
flex-basis: auto(默认值) | px;
flex: none | auto | @flex-grow @flex-shrink @flex-basis;
align-self: auto(默认值) | flex-start | flex-end | center | baseline | stretch;

容器属性

flex-direction 属性

flex-direction 是坐标轴属性，设置项目排列方向。

• row 表示主轴横向，方向为从左指向右。项目沿主轴排列，从左到右排列。

flex-wrap 属性

flex-wrap 设置是否允许多行排列，以及多行排列时换行的方向。

• nowrap 表示不换行，如果单行内容过多，则溢出容器。
• wrap 表示 容器单行容不下所有项目时，换行排列。
• wrap-reverse 表示容器单行容不下所有项目时，换行排列，换行排列的方向是 wrap 的反方向。

justify-content 属性

justify-content 设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。

• flex-start 表示项目对齐主轴起点，项目间不留空隙
• center 表示项目在主轴上居中排列，项目间不留空隙
• flex-end 表示项目对齐主轴终点，项目间不留空隙
• space-bewteen 表示项目间间距相等，第一个项目和最后一个项目离主轴间距相等
• space-around 与 space-between 相似，不同在于：第一个项目离主轴起点距离与最后一个项目离主轴终点距离都为中间项目之间间距的一半
• space-evenly 项目之间间距、第一个项目离主轴起点和最后一个项目离主轴终点的距离相等

align-items 属性

align-items 设置项目在行中的对其方式

• stretch 项目拉伸至填满行高
• flex-start 项目顶部与行起点对齐
• center 项目在行中居中对齐
• flex-end 项目底部与行终点对齐
• baseline 项目的第一行文字的基线对齐

align-content 属性

align-content 多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间。

• stretch 当未设置项目尺寸，将各行中的项目拉伸至填满交叉轴；当设置了 项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴
• flex-start 首行在交叉轴起点开始排列，行间不留间距
• center 行在交叉轴中点排列，行间不留间距，首行离交叉轴起点与尾行离交叉轴终点距离相等
• flex-end 尾行在交叉轴终点开始排列，行间不留间距
• space-between 行与行间距相等，首行离交叉轴起点与尾行离交叉轴终点距离为零
• space-around 行与行间距相等，首行离交叉轴起点与尾行离交叉轴终点距离，等于行与行间距的一半
• space-evenly 行间间距、首行离交叉轴起点和尾行离交叉轴终点距离相等

项目属性

order 属性

order 设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。

flex-shrink 属性

flex-shrink 当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。

flex-grow 属性

flex-grow 当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。

flex-basis 属性

当容器设置 flex-direction 为 row / row-reverse 时，flex-basis 和 width 同时存在，flex-basis优先级高于width，也就是此时 flex-basis 代替项目的width属性。

当容器设置 flex-direction 为 column / column-reverse 时，flex-basis 和 height 同时存在，flex-basis优先级高于height，也就是此时 flex-basis 代替项目height属性。

当 flex-basis 和 width（或height），其中有一个属性值为 auto，非auto的优先级更高。

flex 属性

flex 是 flex-grow / flex-shrink / flex-basis的缩写方式。
flex 为 none 等效于 0 0 auto
flex 为 auto 等效于 1 1 auto

align-self 属性

aline-self 设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的 align-items，这么做可以对项目的对齐方式做特殊处理。默认值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch.