微信小程序组件view

view：视图容器

1、hover

view属性

2、flex-direction 弹性容器的方向

(1) flex-direction:row 横向

.wxml文件代码 .wxss文件代码

(2) flex-dierction:column 纵向

.wxml文件代码

3、justify-content 视图在屏幕中的位置

(1) justify-content:flex-start 位于屏幕的左边

(2)  justify-content:flex-end      位于屏幕的右边

(3)  justify-content:center        位于屏幕的中间

(4)  justify-content:space-between    均匀分布

(5)  justify-content:space-around        均匀分布，并且两边会留有空间

4、align-items 视图在屏幕中的位置，表示所有项目上的对齐方式

(1) align-items: flex-start 从左至右对齐

(2) align-items:flex-end 从右至左对齐

(3) align-items:center  居中

(4) align-items:baseline 

(5) align-items:stretch

5、align-content属性

align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。

---

关于align-content和align-items的区别比较：

---

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。在元素布局的时候，如果有多个侧轴，则align-content生效，如果只有一个侧轴，则align-items生效。

6、align-self是写在flex的子项属性上的

align-self 属性定义flex的子项单独在侧轴（纵轴）方向上的对齐方式。

注意：align-self 属性可重写灵活容器的 align-items 属性。

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

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

7、flex-wrap是决定项目是否多行显示的属性，项目默认情况下是在一行下显示的。

(1) flex-wrap: nowrap 指的是在一行显示不换行

(2) flex-wrap: wrap  指的是多行显示

(3) flex-wrap: wrap-reverse 指的是多行显示，但是跟规定排列方向相反

flex-flow是 flex-direction 和 flex-wrap 的缩写

flex-flow: <‘flex-direction’> || <‘flex-wrap’>