微信小程序-Flex布局
学习小程序有段时间了,想着把这段时间的成果总结几个点,let‘s begin。
小程序的理念就是开箱即用,嫖完就跑,其小程序的框架封装得也很好,感觉上手比学习Angular要轻松不少。
那既然是做前端的,亘古不变的话题就是页面布局。
而我们的角儿——微信小程序,常用的布局方式是Flex布局。
Flex布局的意思就是弹性布局,我的理解这种布局就像一块有弹性的胶布,你在上面写的东西后,你拉伸或者挤压这块胶布,上面内容所呈现的概念就是弹性布局。
他不会像float,你wrap的空间尺寸变了,里面的东西有可能挤压到下一行,也不会像定位那样,因为太依靠相对定位导致排版会乱。
Flex容器定义
正常容器:
display:flex;
行内元素
display:inline-flex
Webkit 内核的浏览器
display: -webkit-flex; /* Safari */
display: flex;
flex-direction属性:决定是横还是竖
flex-direction: 决定是横还是竖
1.row(默认值):主轴为水平方向,起点在左端。
2.row-reverse:主轴为水平方向,起点在右端。
3.column:主轴为垂直方向,起点在上沿。
4.column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap属性:是否换行
1.nowrap:不换行(默认)
2.wrap:换行
3.wrap-reverse:换行,第一行在最下面(从下往上换
justify-content: 是在横向上做改变
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items: 是在纵向上做改变
1>stretch 填充整个容器(默认值)
2>flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些)
3>flex-end 侧轴的终点对齐
4>center 在侧轴中居中对齐
5>baseline 以子元素的第一行文字对齐
常用的也就这些,遇到了会在补充~