CSS之flex需要知道的一切（一）

1.flex速记

1.1 flex: 0 1 auto

很容易理解这一点，flex-basis设置为auto，这意味着Flex项目的初始宽度计算是基于内容的大小来自动变化

flex-grow设置为0，这意味着flex-grow不会改变Flex项目的初始宽度，也就是flex-grow的开关是关闭的，Flex项目不会放大以适应屏幕（Flex容器大小）

flex-shrink的值是1，说明缩小开关是开启的，也就是Flex项目在必要时会缩小

1.2 flex: 0 0 auto

宽度是自动计算，不过弹性项目不会伸展或者收缩（因为二者都被设置为零），也就是伸展和收缩开关都被关掉了

它基本上是一个固定宽度的元素，其初始宽度是基于弹性项目中内容大小

注意这里一个弹性项目会比另一个容纳更多内容

应该注意到的第一件事情是，这两个弹性项目的宽度是不同的。因为宽度是基于内容宽度而自动计算的。所以缩放一下浏览器，当内容过长的时候你会注意到因为弹性项目不会收缩其宽度。它们从父元素中突出来了，要看到所有内容，必须横向滚动浏览器

1.3 flex: 1 1 auto

自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度，伸展和收缩开关打开了，宽度自动被计算

1.4 flex: “positive number”

这里正数可以代表任何正数（没有引号）

注:将弹性项目的初始宽度设置为零（嗯？没有宽度？），伸展项目以填满可用空间，并且最后只要有可能就收缩项目

注：弹性项目没有宽度，那么宽度该如何计算呢？这个时候 flex-grow 值就起作用了，它决定弹性项目变宽的程度。由它来负责没有宽度的问题

2.绝对(flex:1)和相对Flex项目(flex:auto)

那绝对和相对Flex项目之间到底有啥区别呢？二者之间主要的区别在于间距及如何计算间距？？

一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中，只根据 flex 属性来计算，而不是内容

2.1 相对Flex项目

这里Flex项目的初始宽度是被自动计算的（flex-basis: auto），上面示例中Flex项目的内容大小不相同，所以Flex项目的大小就会不相等且可以自动伸缩

2.2 绝对Flex项目

这里只修改一行CSS代码，因为之前说过初始宽度是0，所以宽度根据flex-grow属性来决定，它们会伸展以适应可用空间。

总结：绝对Flex项目的宽度只基于 flex 属性，而相对Flex项目的宽度会基于内容大小而改变，再辅以自动伸缩

3. Auto-margin对齐

注：一定要当心Flex项目上的 margin: auto 对齐。当在Flex项目上使用 margin: auto 时，事情看起来就很怪异了

当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间

- flex-grow 值为设置为0。这就解释了为什么列表项不会伸展

- Flex项目向Main-Axis的开头对齐（这是默认行为）

- 由于项目被对齐到Main-Axis开头，右边就有一些多余的空间。看到了吧？

现在在第一个列表项（branding）上使用 margin: auto，看看会出啥情况

刚刚发生了什么？之前的剩余空间现在已经被分配到第一个Flex项目的右边了

还记得我前面说的话吧？当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间

如果想让一个Flex项目的两边都用自动外边距对齐，该怎么办呢？

注：那么，这是不是对很酷的自动外边距对齐的一种折衷方案呢？看起来是。如果没注意的话，它也可能是受挫之源。当在一个Flex项目上使用自动外边距（margin: auto）时，justify-content 属性就不起作用了

总结：在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间