前言：这是我见过最好的flex布局教程：30分钟彻底理解flex布局传统布局方式和flex属性概览文档流程：块级元素占一行，从上到下bottomArrangement，行级元素从左到右排列。displayinline-block主要用于横向布局。使用单独的负maigin来生成位移。学习flex的元素布局我分为两部分，第一部分是元素布局。以下属性影响元素的布局。/*关于容器：*/justify-contentalign-itemsflex-directionflex-wrapflex-flowalign-content/*关于元素：*/orderalign-self打完下面的游戏，阅读下面两篇文章，理解上面的属性才能理解元素的布局。他们写得很详细。不用我在这里耍花样了。30分钟全面了解flex布局Flex布局教程：CSS3语法【FlexLayout】有趣的青蛙游戏游戏共有24个关卡。在每个关卡中，将所有颜色的青蛙移动到对应颜色的荷叶边即可过关。清除关卡后，影响布局将使用属性。flex-grow、flex-shrink、flex-basis这三个影响stretch和size大小的属性比较难理解。可以观看30分钟，全面了解flex布局，深入理解flex布局。flex-grow、flex-shrink、flex-basis在这里记录自己的理解。flex-basisflex-basis用于设置元素在主轴上的尺寸（如果轴体从上到下变化，会覆盖高度）。flex-basis:0表示元素根据内容扩展宽度，宽度不起作用。flex-basis的优先级高于width。当flex-basis为auto时，如果设置了宽度，则元素大小由宽度决定；如果没有设置，则由内容决定。（默认是auto）所以如果一个容器设置为flex布局，那么当里面的元素没有设置宽高的时候，尺寸会被内容扩大！详细内容，完全理解flex布局需要30分钟。flex-shrink就很清楚了。如果该行不换行flex-wrap:nowrap;主轴上的元素总和超过容器的宽度，则默认收缩。默认flex-shrink为1，即收缩因子为1，即当分配不够时，元素会按比例缩小，填满整个宽度。flex-shrink为0，表示这个元素不收缩。如果超过，它会收缩其他元素。详细的，30分钟就能完全理解flex布局，非常清晰。flex-grow默认为flex-grow:0，即不扩展。原来有多大就多大（flex-basic的长度或者width，height）然后按照扩展因子分配。比如50px没有分配，flex-grow的两个子元素分别是：flex-grow:3和flex-grow:2，那么第一个元素分配30px，第二个元素分配20px。如果第一个元素的flex-grow设置为1而另一个没有，那么所有额外的大小都将分配给第一个元素。详细的，30分钟就能完全理解flex布局，非常清晰。flexflex=flex-grow+flex-shrink+flex-basis一些简写flex:1=flex:110%//flex:2=flex:210%flex:auto=flex:11auto;flex:none=弹性：00自动；//**通常用于不拉伸的固定尺寸**flex:1和flex:auto的区别。如果flex-grow+flex-shrink都为1，表示超过这一行或者小于这一行，都按比例占据这一行（放大或者缩小元素）！！flex:1和flex:auto的区别是上下缩放，然后填满一行。其实可以归结为flex-basis:0和flex-basis:auto的区别。flex-basis指定初始大小。当设置为0（绝对弹性元素）时，相当于告诉flex-grow和flex-shrink拉伸时不考虑我的尺寸；反之，设置为auto时（相对弹性元素），此时拉伸时需要考虑元素大小。总结：当flex:1时，拉伸时不需要考虑width，因为flex-basis:0（元素的宽度就是内容的宽度），只需要根据content的宽度按比例缩放即可元素。flex:auto时，拉伸时需要考虑宽度，scale根据宽度缩放。示例：flex:1应用程序：
