最近开始研究一个框架，正好里面实现了flex布局的算法。这些概念都不是很清楚，所以马上谷歌了一下几个flex涉及的属性，自己梳理一下就对了。main-axis和cross-axismain其实和flex-direction这个属性有很大关系，如下图所示：根据flex-direction的取值不同，main-axis的方向也不同。既然有方向的概念，这时候就要注意justify-content属性（justify-content主要负责调整元素在主轴上的布局）当值为flex-start和flex-结尾。横轴垂直于主轴。当flex-direction的值为row或row-reverse时，横轴的方向为自下而上。当flex-direction的值为column或column-reverse时，横轴方向为从左到右。align-items和align-content首先，align-item和align-content是应用于横轴的元素。默认情况下，flex布局的元素不会换行。这是align-items起作用的时候，但是当有多行的时候，align-items的表现有点令人失望。比如你期待这样的网格布局：但是实际效果会是这样的：这个网格怎么看都觉得怪怪的。这个时候，align-content属性就该大显身手了。align-content主要用在多行的场景，只有单行的时候就没用了。flex-basisflex-basis可以说是一个不太起眼但意义重大的属性。flex-basis这个函数主要是在用flex计算剩余空间的时候起作用的。如果将flex-basis设置为明确的大小，计算剩余空间时会先减去这部分，再根据剩余空间取正负。否定应用flex-grow或flex-shrink进行缩放。当flex-basis默认值为auto时，flex-basis相当于元素自身的宽度（比如你设置了width，就是设置的值，如果width也是auto，就相当于宽度元素含量）。当flex-basis为0时，相当于完全依靠flex-grow的比例和剩余空间的大小来分配。在计算额外点的剩余空间时，预先扣除padding、margin、border和flex-basis，然后根据flex-grow分配空间。当justify-content为space-around时，元素与父元素之间的间隙为元素之间间隙的一半。
