文章目录
css一般用于设置控件的样式。而我这里做记录主要是为了wxss使用的，应该和css是一样的。
这个简单的记录里将会省略内容部分，主要在使用flex弹性布局的时候，如何处理布局
flex
具体的使用和页面表现可以参考上面的链接，这里做一个简单的小结
相关概念：
主轴与侧轴：
主轴其实就是规定的flex-direction方向的轴，默认横向，从左往右
侧轴是与主轴垂直交叉的轴
flex布局又称为弹性盒子，谁想成为弹性盒子，就可以给谁的样式设置display: flex
box：
容器，也可以说是盒子，设置盒子的属性你可以说是设置盒子里面的分格
display
设置display为flex的控件才能成为盒子
flex-direction
设置盒子内的存放方向：默认为row
row：横向，从左往右； row-reverse：横向，从右往左
column：纵向，从上往下 column-reverse：纵向，从下往上
flex-wrap
设置盒子内的换行，默认为不换行，值为no-wrap
在不换行的情况下，当盒子的宽度一行放不下的时候，会压缩内容的每一个item，已达到主轴上一行放下的效果
也就是说，方向为横向，压缩每个item的宽；方向为纵向，压缩每个item的高
取值为wrap的时候，就表示盒子允许多行，主轴方向一行放不下的时候，就会换行
取值为wrap-reverse的时候，表示与正常换行方式相反
flex-flow
是前面两种：direction和wrap的组合方式，可以赋2个值，用空格间隔
比如
flex-flow:row wrap
如果只赋一个值，那么它会看是谁的就设置哪个属性，比如你赋值row，那么就设置了direction的属性
justify-content
我们有了盒子，假设我们此时的主轴是横向，从左往右，这个属性就是设置主轴上的布局方式
flex-start
默认的，我们盒子里面放的东西都是从盒子的最左边开始，往右放置，此时justify-content的值也就是flex-start。
也就是将盒子里面放置的内容作为整体，靠盒子的左边放置
flex-end：
将盒子里面放置的内容作为整体，靠盒子的右边放置
center
将盒子里面放置的内容作为整体，放置在盒子主轴的中间位置
space-between
就是盒子里最左边的item靠左，最右边的item靠右，然后分割剩余的空白空间，使得相邻的item中间的间隔距离是一样的，也就是：
space between item
space-around
将盒子内主轴方向上的剩余的空间，均匀地分布在item的两侧。也就是space around every item
align-content
看名称，是与justify-content相似，功能也是相似的，但是有区别：
- 前提是主轴上有多行，否则这个属性是无效的
- 可取值比justify-content的多了一个stretch，也是默认值，默认值是伸展的意思
- 规定的是侧轴上的布局方式。
简单来说，这个是在主轴有换行的时候，设置侧轴上的布局方式。默认值是下面描述的布局方式
flex-start
假设我们此时的主轴是横向，从左往右；侧轴是从上到下
将盒子里面放置的内容作为整体，靠侧轴方向最上方放
stretch
如果主轴换行了，又没有定义这个属性，也就会取stretch（伸展的意思）
还是假设此时主轴是从左到右的横向，侧轴是从上到下的。此时item主轴是宽，侧轴是高
假设此时flex-start的效果如下：box的宽高都是400，每个item的宽度和高度都是100，
如果item高度都为auto：
当1设置高度100，其他40
会以一行上最高的高度作为行高（添加6是为了看换行效果）
把flex-start切换为stretch后
在item高度还是100的时候：
它们是每一行都平分了flex-start效果下的空白区域
当1设置高度100，其他40：
它们是每一行都平分了flex-start效果下的空白区域
在item高度还是auto的时候：
高度自适应，会撑满侧轴空间
align-items
默认取值也是stretch。侧轴上自动伸展。
与align-content的区别是：（假设我们此时的主轴是横向，从左往右）
-
在主轴没有换行的时候也可以使用，
-
在主轴有换行的时候，设置每一行上的布局方式
可以相对于align-content理解
item
order
在父布局中的顺序，比如有两个text控件，order值为1的就排在order值为2的前面
flex-grow
像Android中的权重，默认值为0，就是自己大小
假设有多个内部控件，每个内部控件的这个值都为1的时候，平分空间
值为2的，将比值为1的多占一倍空间
flex-shrink
是否有缩小功能，值为0表示不缩小，哪怕空间不足。
值为1表示在空间不足的时候，缩小当前控件
flex-basis
和width一起使用会使width无效。
指定值：就是width的值
auto：没有明显效果
百分比：横向占父空间的百分比
一般和flex-warp一起使用，使浏览器判断是否换行
flex
是前面三个属性的总和：有权重，是否缩放，basis
对应的默认值是：0 1 auto
快捷值：none：表示 0 0 auto
快捷值：auto：表示 1 1 auto
align-self
在父布局中，我自己想要与众不同的布局
