最近难得有空。下面总结一下flex布局相关的知识点。如有错误或遗漏，请指正。谢谢~flex布局总结：快速记住主轴的方向，记住justifycrossaxis的方向，记住align关系是：justify-contentalign-itemsalign-self设置主轴的方向flex-directionsetswrapping:flex-wrap设置主轴的复合属性wrapping:flex-flow设置拉伸基础:felx-basis设置拉伸:flex-grow设置缩放:flex-strink设置子元素顺序:order兼容性写法：显示：-webkit-box；显示：-moz-box；显示：-ms-flexbox；显示：-webkit-flex；显示：弹性；四种布局方式：1.标准文档流2.浮动布局3.定位布局4.Flex布局Flex布局核心：Flex核心主要在轴和容器上做文章。下面主要从轴（主轴和交叉轴）和容器（父容器和子容器）两个方面进行讲解。container：父容器的父容器属性可以设置子容器的统一排列主轴方向：1.justify-content：父容器设置子容器在主轴上的排列：对应属性值排列:*位置排列:flex-startflex-endcenter*分布排列:space-aroundspace-between横轴方向:2.align-items:父容器设置子容器在横轴上的排列:对应属性值排列方式:*位置排列：flex-startflex-endcenter*基线排列：baseline*pull拉伸排列：拉伸高级属性：3.flex-wrap：设置包裹方式wrapping：wrap不包裹：nowrap反向包裹：wrap-reverse反向包裹指4.flex-flow：axialandlinebreak，是flex-direction和flex-wrap的组合属性。Flow是流向，也就是子容器流向的方向，流的最后是否允许换行。比如flex-flow:rowwrap，flex-flow是一个复合属性，相当于flex-direction和flex-wrap的组合。可选值如下：rownowrap，columnwrap等，或者两者可以同时设置。当行对齐时，设置行之间的对齐方式。对应属性值的排列：*位置排列：flex-startflex-endcenter*分布排列：space-aroundspace-between*stretch排列：stretch####6.flex-direction：不同的主轴方向位置和不同的主轴位置方向对应属性Value:totheright:rowtotheleft:row-reversedown:coloumnup:coloumn-reversecontainer:sub-container子容器属性可以自己设置排列1.flex:子容器设置扩展和自身容器收缩比例：对应的属性值unit方式：无unitNumber：1,2,3Unitnumber：15px,50px,100pxNone关键字：无缩放2.align-self：子容器设置自己的cross-axis排列及对应的属性值排列方式：*Position排列：flex-startflex-endcenter*Baseline排列：baseline*Stretch排列：stretch子容器高级属性3.flex-basis：设置flex-basis中的basesize表示子容器没有拉伸的原始大小。当主轴水平时，它表示宽度。主轴垂直时表示高度：4.flex-grow：设置子容器弹性拉伸比例的扩展比例，剩余空间按比例扩展拉伸。5.flex-shrink：设置收缩比例，剩余空间按比例伸缩分配子容器弹性收缩的比例。6.order：设置主轴的排列顺序，改变子容器的排列顺序，覆盖HTML代码中的顺序。默认值为0，可以为负数。值越小，排列越高。axis主轴：决定容器水平方向的排列主轴的起始端用flex-start表示，结束段用flex-end表示。横轴决定了容器的垂直方向。end表示主轴逆时针旋转90°，得到一个横轴的flex布局，共有13个属性，声明：display:flex6个主容器和6个子容器如下图：
