flex布局梳理

作者 Kylewh 日期 2017-04-10
css
flex布局梳理

主轴Main Axis and 交叉轴 Cross-Axis

这是两条轴默认情况下的情况,默认被设置为display: flex的container里内部item会自左向右沿着Main-Axis进行排列。

效果如下:

我们可以改变轴的位置通过使用: Flex-direction

效果如下:

我们还可以改变排列的顺序,默认是从左到右,那么如果使用flex-direction: row-reverse,就会变成从右向左。

同理,使用flex-direction: column-reverse就会从自上而下变成自下而上:

这两条轴是我们应用属性时的维度方向的依据,根据依赖的轴不同,属性可以分两类:

  • 主轴依赖:Flex-basisflex-grow
  • 交叉轴依赖:

Flex-basis