flex是一种布局方式，开始于CSS3之后。它主要由父容器和子项组成。父容器有六个属性，分别是：controlaxisaxis:flex-directionrow:水平轴（默认）row-reverse:反转水平轴column:垂直轴column-reverse:反转垂直轴换行方式：flex-wrapnowrap:nolinewrap(default)wrap:linewrapwrap-reverse:reverselinewrap主轴排列:justify-content横轴排列:align-items轴向和换行组合设置:flex-flow(Flowdirection)一般很少有这个属性used，即改变子项的布局顺序，向前和向后，子项也有六个属性，分别是：elasticexpansion:flex-grow指定容器剩余空间冗余时的分配规则。默认值为0，不分配多余的空间。弹性收缩：flex-shrink指定容器剩余空间不足时的分配规则。默认值为1，需要分配空间；如果为0则表示不分配基本尺寸：flex-basis指定flex元素主轴方向的初始尺寸（基本尺寸）默认值为auto，即item本身的尺寸缩写：flexflex-grow、flex-shrink、flex-basis缩写默认值为01auto主轴顺序：order横轴对齐：align-self一般来说，父容器控制整体布局，子容器控制子项的布局。在采访中，通常不会问它有多广泛。flex面试最常见的问题是：flex:01auto你是怎么理解的？flex:1具体代表什么，应用场景有哪些flex:0,flex:1,flex:none,flex:auto，分别代表什么意思，分别用在什么场景下？要回答这些问题，我们必须了解flex属性的flex语法flex:none|汽车|[<'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为100px.此时flex-grow和flex-shrink的值都是1。注意这里的flex-grow的值是1，不是默认值0。关键字none,auto或initialdouble-value语法：如果flex的属性值有两个值，第一个值必须是flex-grow，第二个值根据值的类型代表不同的CSS属性，具体规则如下：值：例如flex:12，那么这个2就是flex-shrink的意思，这个当flex-basis的值为0%，而不是autolength的默认值，比如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%；张新旭大师画了一张图：单值语法相当于备注flex:initialflex:01auto初始值，常用flex:0flex:010%适用场景少flex:nonelex:00auto推荐flex:1flex:110%recommendedflex:autoflex:11auto适用场景较少默认值flex:initial相当于flex:01auto，表示有剩余空间时flex容器的大小不增加(flex-grow:0)，当flex容器的大小不足时，size会收缩变小(flex-shrink:1)，大小自适应内容(flex-basis:auto)我的理解：当child的总长度小于totalcontainer时，不会去填充（flex-grow:0），按照实际的宽高存在（flex-basis:auto）；当子项总长度大于容器总长度时，子项会相对于相对比例收缩(flex-shrink:1)适用场景适用于子项总长度小于的场景总容器，比如按钮、标题、小图标等widget的layout布局。flex:0和flex:none的区别flex:0相当于设置flex:010%，flex:none相当于flex:00autoflex:0，因为是一个值，一个值，所以表示flex-grow，后来发现只有设置了flex:number，那么flex-basis会自动变成0%，所以flex:0的元素最终的大小表示为最小内容宽度；note:flex:1===flex:110%flex:0===flex:010%flex设置数后，虽然flex-basis是最小宽度，但是前者的flex-grow有一个值，可以扩展child来填充容器，后面为0，不扩展flex:none，既不是一个值也不是一个长度值，none关键字。flex:00auto表示元素的大小不会收缩或扩展，加上flex-basis:auto表示固定大小由内容决定，因为元素没有弹性，因为元素内的元素不会wrap,finalsize通常适用于使用flex:0的场景。不管文本内容怎么设置，左边内容的宽度就是图片的宽度。适用于使用flex:none的场景。当flexitem的宽度为内容的宽度，且内容的行永远不会换行时，适合使用flex:none。比如下面的场景，图片和按钮都是固定长度的，flex:1和flex:auto在内容和适用场景上的区别相当于设置flex:110%，flex:auto相当于flex:11auto可以看出两者的flex-grow和flex-shrink是一样的，也就是说都可以弹性伸缩。不同的是flex:1中的flex-basis为0，即宽度为0。flex:auto中的flex-basis是auto，即宽度是自己的宽度。这里需要说明一下，因为一开始没看懂。公式为：每个子项的宽度=（totalwidth-flex-basiswidth）/3（以本例为例）因为flex:1的flex-basis宽度为0，所以每个child都可以当其总宽度最终扩大或缩小时被平分。适用于flex:1场景当你希望元素充分利用剩余空间而不侵占其他元素的宽度时，适合应用flex:1。比如在所有equallists之前应用flex:none,你也可以为文本部分设置flex:1。类似的效果适用于flex:auto场景。当你想让元素充分利用剩余空间，但它们各自的大小是根据各自的内容分配的，适用于flex:auto。比如导航条数不固定，每个导航文字的页数不固定。导航效果适合flex:auto。回顾前面提到的面试题，flex:01auto，你是怎么理解的？flex:1具体代表什么，应用场景有哪些flex:0,flex:1,flex:none,flex:auto，分别代表什么意思，分别用在什么场景下？回答第一个问题。flex的默认值为01auto，表示容器在空间过剩时不扩展，空间不足时收缩。子项的宽度根据自身的宽度显示。如果是一个值和一个数字，表示flex-grow:1，当是一个数字时，flex-basis会自动变为0，所以具体表示为flex:110%，表示剩余的空间container多余的时候膨胀，不足的时候收缩，subitem的宽度为0。一般适合在不侵占其他元素宽度的情况下充分利用剩余空间。比如第三题equallayout的答案是flex:0，表示flex:010%，表示容器空间多余时不会展开，不足时收缩，宽度子项的值为0。适用于在替换元素的父元素上设置flex:1。看第二个回答flex:none意思是flex:00auto意思是容器空间多余的时候不会膨胀，不足的时候不会收缩，子项的宽度是自己的width，适用于不换行或较少的小控件元素的内容。flex:auto表示flex:11auto表示容器空间多了就扩，空间不够就缩，子项的宽度就是它自己的宽度，适用于根据内容动态适配的布局（例如,导航文字个数长度不固定)flex:initial表示flex:01auto,表示容器中剩余剩余空间不够时不展开，不足时收缩。子项的宽度是它自己的宽度。适用于小控件元素的分布布局，或内容动态变化的布局参考资料。flex:0flex:1flex:noneflex:auto应该在什么场景下使用？深入理解CSSflex属性MDNWebDocsflex一劳永逸搞定flex布局本文参与SegmentFaultthink-no-say随笔《如何“反杀”面试官？如果您正在阅读，欢迎您加入。
