随着浏览器对css3属性的支持,flex布局运用的越来越多。今天,简单的说下flex的几个常用属性之间的关系。
flex-direction
flex-direction 主要有四个属性值。 row row-reverse column column-reverse
flex 布局的方向。垂直和水平。reverse 为取反。但是 reverse 后,水平和垂直方向上有些不用,水平上方向reverse后,会距离左边有一段距离。而垂直方向上却没有,根本
原因是 外面的盒子,需要设置宽高。
主轴、交叉轴
很多人经常说说,主轴就是垂直方向,交叉轴是水平方向。其实,这种说法不准确。准确来说,主轴和交叉轴是根据 flex-direction 的 方向来定的。值为 row ,主轴就是水平方向,交叉轴就是 垂直方向。值为 column ,主轴是 垂直方向,交叉轴是水平方向。
justify-content、align-items
justify-content 就是根据主轴方向来的。align-items 是依据 交叉轴方向。
总结 : flex-direction 决定着主轴和交叉轴的方向,而 justify-content、align-items 又是依赖于主轴和交叉轴的方向。是一条环环相扣的链条。