小程序----小程序框架学习（三）flex布局

小程序框架：包括逻辑层、视图层和flex模型

逻辑层由javascript编写，视图层由WXML和WXSS配合组件组成，flex布局确保页面适应不同屏幕尺寸时在恰当的位置。

本篇主要介绍flex布局。逻辑层介绍见https://blog.csdn.net/maidu_xbd/article/details/102491766

视图层介绍见：https://blog.csdn.net/maidu_xbd/article/details/102504302

flex布局

flex布局是一种灵活的布局模型，使用该方式可以非常优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。当页面需要适应不同屏幕尺寸及设备类型时该模型可以确保元素在恰当的位置。使用flex布局可以提高页面布局的效率。在flex布局中，用于包含内容的组件称为容器，容器内部的组件称为项目。

常用的属性：

常用属性	属性值
flex-direction 主轴的方向	row|row-reverse|column|column-reverse row：默认值，水平方向从左到右排列，此时水平方向轴线为主轴 row-reverse：与row相反 column：垂直方向从上到下排列，此时垂直方向轴线为主轴 column-reverse：与column相反
justify-content 主轴上子项对齐方式	flex-start | flex-end | center | space-between | space-around | space-evenly flex-start：默认值，与主轴开始位置对齐 flex-end：与主轴结束位置对齐 center：与主轴中间对齐 space-between：两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start space-around：间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center space-evenly:间距相等，中间间距和两端间距一样。
align-items 侧轴上子项对齐方式	stretch | flex-start | flex-end | center | baseline stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度 flex-start：与侧轴开始位置对齐 flex-end：与侧轴的结束位置对齐 center：与侧轴中间对齐 baseline：基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start
flex-wrap 指定主轴上的子项是否换行	nowrap | wrap | wrap-reverse nowrap：默认值，表示不换行，Flex子项可能会溢出 wrap：表示换行，溢出的Flex子项会被放到下一行 wrap-reverse：表示反方向换行
align-content 只作用于多行的情况下，用于多行的对齐方式（侧轴）	stretch | flex-start | flex-end | center | space-between | space-around | space-evenly
align-self 单独指定某Flex子项的对齐方式（侧抽）	auto | flex-start | flex-end | center | baseline | stretch
order 设置项目在主轴的排列顺序	<integer>,默认值为0
flex-shrink 收缩在主轴上溢出的项目	<number>，默认值为1
flex-grow 扩张在主轴上还有空间的项目	<number>，默认值为0
flex-basis 代替项目的宽/高属性	<length>