flex主体分为flex-container以及flex-item。
flex-container：对元素应用display：flex 或者display：inline-flex即可让元素变为flex容器。
flex-item：flex容器内的子元素。
flex-container属性：flex-direction，flex-wrap，flex-flow，justify-content，align-content，align-item。其中flex-direction表明了flex-item的排列方向，flex-wrap表明了flex-item是否换行排列，flex-flow是flex-direction以及flex-wrap属性的速记写法。justify-content定义了flex-item在主轴上的对齐方式，align-item类似justify-content，定义了flex-item在对称轴上的排列方式。align-content定义了flex-item在对称轴上的多行排列方式，与wrap属性有关。
flex-item属性：order，flex-grow，flex-shrink，flex-basic，flex，align-self。其中order允许一个flex-item在flex-container中重新排序。flex-grow与flex-shrink属性允许flex-item在flex-container有多余的空间如何放大，以及在没有额外空间又如何缩小，flex-basic指定了flex-item的初始大小，而flex是flex-grow以及flex-shrink以及flex-basic属性的速记写法。align-self影响弹性flex-item在对称轴上的位置。
tips：flex-item通过flex属性可以调整自身在主轴上的大小，并且辅以margin属性可以调整自身在主轴上的位置。
原理以及demo：理解flexbox，你所需要知道的一切