• update：

19.06.27 遇到了flutter的原生webview在oppo A37M上即使overflow:scroll,flex-shrink也默认不为0的情况，深感对flex的了解还很浅显，于是进行细节的学习。

主轴和交叉轴

首先一个贯穿全局的概念：主轴和交叉轴。

主轴(main axis)默认为水平的，从容器左侧开始，到容器右侧结束，所以子元素的排列默认(flex-direction不进行特殊设置)为从左到右。

交叉轴(cross axis)默认为垂直的，从容器上方开始，到容器底部结束，所以子元素的垂直方向(align-items不进行特殊设置)默认为从上到下。

PS：如果容器的flex-direction设为colum，主轴的方向会转换为垂直方向的从上到下，这时交叉轴的方向会自动转换为从左到右(align-items:flex-start)。

作用于容器上的6个属性：

flex-direction flex-wrap flex-flow justify-content align-items align-content
主轴的方向 如果一条轴线排不下，如何换行 flex-direction和flex-wrap的合写 项目在主轴上的对齐方法 项目在交叉轴上的对齐方法 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
row
(default)
左->		 nowrap
(default)
 row nowrap
(default)		 flex-start
(default)
 flex-start
交叉轴起点到终点
row-reverse
右 -> 左		 wrap
换行		 flex-end
主轴终点到起点		 flex-end
交叉轴终点到起点
colum
上 -> 下		 wrap-reverse
换行，第一行在最下		 center
主轴上居中		 center
在交叉轴上居中
colum-reverse
下 -> 上		 space-between
两端对齐，项目之间间隔相等		 baseline
会按照子项目第一行文字的基线对齐，如果不在一条水平线上，按照最靠下的一个
space-around
每个项目两侧间隔相等，所以项目之间为两个间隔		 stretch(default)
如果项目未设置高度或设为auto，将占满整个容器的高度。

作用于子项上的6个属性：

order flex-grow flex-shrink flex-basis flex align-self
定义项目的排列顺序。
数值越小，排列越靠前		 定义项目的放大比例 定义了项目的缩小比例 分配多余空间之前，项目占据的主轴空间 flex-grow,flex-shrink,flex-basis的简写 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
0
(default)
存在剩余空间，也不放大		 1
(default)
如果空间不足，会把本项目缩小		 auto
(default)
项目的本来大小		 0 1 auto
(default)		 auto(default)
继承父类的align-items属性
固定的数值，则项目将占据固定空间 auto
(1 1 auto)
none
(0 0 auto)
  • flex-grow 是根据比例对剩余空间的分配进行的计算。
  • flex-basis: auto;指的项目本来大小，是与flex-shrink互相作用的。而如果flex-basis的值为项目原本的宽度，那么flex-shrink属性会表现为不起作用。