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’>
网友评论