flex是CSS3之后开始的一种布局方式。它主要由父容器和子项组成。父容器有六个属性，分别是：controlaxisaxis:flex-directionrow:horizo??ntalaxis(默认)row-reverse:reversehorizo??ntalaxiscolumn:verticalaxiscolumn-reverse:垂直轴倒置。换行模式：flex-wrapnowrap：无换行（默认）wrap：换行wrap-reverse：反转换行。主轴对齐：对齐内容。横轴对齐：align-items。轴向和换行组合设置：flex-flow(流向)这个属性很少用到，就是改变子项的布局顺序，向前和向后。子项也有六个属性，即：elasticexpansion:flex-grow指定容器剩余空间过多时的分配规则。默认值为0，多余的空间不分配。弹性收缩：flex-shrink指定容器剩余空间不足时的分配规则。默认值为1，需要分配空间；如果为0，则表示不分配。基本尺寸：flex-basis指定了flex元素在主轴方向的初始尺寸（基本尺寸）。默认值为auto，即项目本身的大小。汽车。主轴顺序：顺序。横轴对齐：align-self。一般来说，父容器控制整体布局，子容器控制子布局。在采访中，通常不会问它有多广泛。最常见的flex面试问题是：你怎么理解flex:01auto？flex:1具体代表什么，有哪些应用场景。flex:0,flex:1,flex:none,flex:auto，它们是什么意思，在什么场景下使用？要回答这些问题，我们必须了解子项中的flex属性。flex语法flex:无|汽车|[<'flex-grow'><'flex-shrink'>?||<'弹性基础'>];单管道字符|意味着独家。即这个符号前后的属性值都是支持的，不能同时出现。因此，支持以下语法：flex:auto;flex:none;flex:[<'flex-grow'><'flex-shrink'>?||<'弹性基础'>];方括号[...]表示一个范围。支持的属性在此范围内。他们之中，？表示0或1，也就是说flex-shrink属性是可选的。因为flex属性值也可以是2个值。flex:auto;flex:none;/*2个值*/flex:1100px;/*3个值*/flex:11100px;双管||意思是“或”。表示前后可以分开使用，即flex:flex-growflex-shrink?和flex-basis都是合法的。于是我们又多了两种合法的写法：/*1value,flex-basis*/flex:100px;/*2个值，flex-grow和flex-shrink*/flex:11;转换为文本表达式单值语法：如果flex的属性值只有一个值，则分三种情况：一个无单位的数字，比如flex:1，表示flex-shrink:1，剩下的空间展开。此时flex-shrink和flex-basis的值分别为1和0%。注意这里flex-basis的值为0%，而不是auto的默认值。只需更改flex:number，flex-basis的值就会为0。一个有效的宽度（width）值，用长度值表示，例如flex:100px表示flex-basis:100px，basesize为100像素。此时flex-grow和flex-shrink的值都是1。注意这里flex-grow的值是1，而不是默认值0。关键字none，auto或者initial。双值语法：如果flex属性值有两个值，第一个值必须是flex-grow，第二个值根据值的类型代表不同的CSS属性。具体规则如下：value：比如flex:12，那么这个2表示flex-shrink，此时flex-basis的值为0%，不是auto的默认值。长度值，比如flex:1100px，那么这个100px的值就是flex-basis，此时flex-shrink默认值为0。三值语法：如果flex属性值有3个值，长度值代表flex-basis，其余2个值分别代表flex-grow和flex-shrink。下面两行CSS语句的语法是合法的，意思是一样的：flex:1250%;flex:50%12;flex属性值sceneapplicationflex默认值为01auto。除此之外，还有其他各种值：flex:none，相当于flex:00auto。flex:auto，相当于flex:11auto。flex:1，相当于flex:110%。flex:0，相当于flex010%。张新旭大师画了一张图：单值语法相当于remarkflex:initialflex:01auto初始值，常用flex:0flex:010%较少适用场景flex:noneflex:00auto推荐flex:1flex:110%recommendedflex:autoflex:11auto适用于少数场景。默认值为flex:initial，相当于flex:01auto，意思是flex容器的size在有剩余空间（flex-grow:0）时不会增长，当有空间时size会收缩flex容器大小不足（flex-shrink:1），大小自适应内容（flex-basis:auto）。我的理解：当子项的总长度小于总容器时，不会填充（flex-grow:0），而是根据实际宽高存在（flex-basis:auto）；当子项的总长度大于总容器时，子项会相对于相对比例收缩（flex-shrink:1）。适用场景适用于子项总长度小于容器总长度的场景，比如按钮、标题、小图标等widget的布局。flex:0和flex:none的区别flex:0相当于设置flex:010%，flex:none相当于flex:00auto。flex:0，因为是一个值，一个值，表示flex-grow。后来发现只有设置了flex:number，那么flex-basis会自动变成0%。因此，设置flex:0的元素的最终大小表示为最小内容宽度。注意：flex:1===flex:110%。弹性：0===弹性：010%。flex设置为数字后，虽然flex-basis是最小宽度，但是前者的flex-grow是有值的，可以展开child填满容器，而后者为0，不展开。flex:none，既不是值也不是长度值，none关键字。flex:00auto表示元素的大小不会收缩或扩展，加上flex-basis:auto表示固定大小由内容决定，因为元素没有弹性，因为元素内的元素不会wrap，最终大小通常表示为最大内容宽度。适用于使用flex:0的场景。不管文本内容怎么设置，左边内容的宽度就是图片的宽度。适合使用flex:none的场景当flexitem的宽度为内容的宽度，且内容永远不会换行时，适合使用flex:none，比如下面的场景，图片和按钮都是固定长度的,内容灵活。flex:none适用场景。flex:1和flex:auto的区别和适用场景flex:1相当于设置flex:110%，flex:auto相当于flex:11auto。可以看出，两者的flex-grow和flex-shrink是一样的，也就是说都可以弹性膨胀和弹性收缩。不同的是flex:1中的flex-basis为0，即宽度为0，flex:auto中的flex-basis为auto，即宽度为自己的宽度。性能看起来像：flex:1。这里需要说明一下，因为一开始没看懂，公式是：每个child的宽度=（总宽度-flex-basis的宽度）/3（以本例为例）。因为flex:1的flex-basis的宽度为0，所以最后每个child的总宽度扩大或缩小时可以平分。适用于有flex:1的场景当你希望元素充分利用剩余空间，又不侵占其他元素的宽度时，flex:1就适合，比如所有等分的列表。在前面使用flex:none的示例中，可以通过为文本部分设置flex:1来实现类似的效果。flex:1.适用于flex:auto当你希望元素充分利用剩余空间，但其各自的大小是根据各自的内容分配时，flex:auto适用。比如导航条数不固定，每个导航文字的页数不固定，导航效果就适合flex:auto。弹性自动。回顾一下之前的面试题flex:01auto，你是怎么理解的？flex:1具体代表什么，有哪些应用场景。flex:0,flex:1,flex:none,flex:auto，它们是什么意思，在什么场景下使用？回答第一个问题。flex默认值为01auto，表示容器空间多余时不展开，空间不足时收缩，子item的宽度按照自己的宽度显示。回答第二个问题。如果flex的值为一个值和一个数字，则表示flex-grow:1。当为数字时，flex-basis会自动变为0，所以具体表示为flex:110%，表示container剩余空间，多余时膨胀，空间不足时收缩。subitem的宽度为0，一般适合充分利用剩余空间而不侵占其他元素的宽度，比如equallayout。回答第三个问题。flex:0，表示flex:010%，表示容器空间过剩时不膨胀，空间不足时收缩。子项的宽度为0，适用于被替换元素的父元素。flex:1，见第二个答案。flex:none，表示flex:00auto，表示容器空间过剩时不膨胀，空间不足时不收缩。子项的宽度是它自己的宽度，适合内容不换行或者比较小的控件元素比较优越。flex:auto，表示flex:11auto，表示容器空间过剩时膨胀，空间不足时收缩。子item的宽度是自己的宽度，适用于根据内容动态适配的布局（比如导航文字条数不长，固定）。flex:initial，表示flex:01auto，表示容器空间过剩时不展开，空间不足时收缩。子item的宽度是自己的宽度，适用于小控件元素的分布和布局，或者某个item的动态内容改变布局。参考flex:0flex:1flex:noneflex:auto应该在什么场景下使用？对CSSflex属性有了深入的了解。MDN网络文档flex。一劳永逸地完成弹性布局。
