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项目在必要时会缩小

CSS之flex需要知道的一切(一)_第1张图片

1.2 flex: 0 0 auto

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

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

CSS之flex需要知道的一切(一)_第2张图片

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

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

CSS之flex需要知道的一切(一)_第3张图片

1.3 flex: 1 1 auto

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

CSS之flex需要知道的一切(一)_第4张图片

1.4 flex: “positive number”

这里正数可以代表任何正数(没有引号)

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

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

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

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

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

2.1 相对Flex项目

CSS之flex需要知道的一切(一)_第5张图片

CSS之flex需要知道的一切(一)_第6张图片

CSS之flex需要知道的一切(一)_第7张图片

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

2.2 绝对Flex项目

这里写图片描述

CSS之flex需要知道的一切(一)_第8张图片

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

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

3. Auto-margin对齐

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

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

CSS之flex需要知道的一切(一)_第9张图片

CSS之flex需要知道的一切(一)_第10张图片

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

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

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

CSS之flex需要知道的一切(一)_第11张图片

现在在第一个列表项(branding)上使用 margin: auto,看看会出啥情况

这里写图片描述

CSS之flex需要知道的一切(一)_第12张图片

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

CSS之flex需要知道的一切(一)_第13张图片

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

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

CSS之flex需要知道的一切(一)_第14张图片

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

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

你可能感兴趣的:(css)