文章目录
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
在父布局中,我自己想要与众不同的布局