尚硅谷前端基础 (134)

好，那说完了弹性容器的一个样式，那接下来我们来说弹性元素的样式，呃，弹性元素的样式相比较来说就简单许多了，哎，零四，我们来说一下我们弹性元素的一个样式。呃，在这里面我们还是复制一下零二吧。哎，现在我们这是一个三个这玩意儿啊，三个这玩意儿呢，我们把这个。这个给他去掉。这一地呢，也都给它去掉啊，恢复到原状啊，然后还是来，诶设置我们这个弹性盒，我们把ul设置完弹性盒以后呢，那现在的话，我们的这个这个这个诶来迪斯play一个flex，那现在的话，我们这个Li就已经变成了一个弹性元素了啊弹性元素了，那这里边的话我们来说一下，哎，我们来先说第一个吧，第一个的话，哎，我们刚才已经说过了，叫做一个flex的一个grow啊flex一个grow grow的话，我们这里边可以指定一个值，哎指定一个值，那这个表什么意思呢？哎，这个表示的是我们这个，哎这个弹性的一个这个增长系数啊，增长系数，哎增长系数，也就是说，哎，你现在我写一个葛肉一，那是不是等于都是一啊，诶都是一，那就意味着他们的比例是一样的，那这个时候比如说我有空白空间，我空了300，那么OK，你是不是都是一啊，都是一，那就平均分配一个多100啊，一个多100，所以是这么一个效果啊，这么一个效果，那这个时候呢，增长。

系数它是按比例去分配的，这没什么好说的，就是我比如说我我改一下吧，我这个一是一，然后呢，这个是我们的一个这个flex grow，这个是一个二，这个写一个二，然后呢，这个写一个三，刚才已经演示过这个问题了，对吧，我们这写一个三，那这个时候他们是一个123，那这个时候增长系数它就比较大一点，所以三的话会比一二增加了都多，所以比如说还是还是300啊，还是300，那么他们一共是六份对吧，一共是六份，那六份的话，300除以六就一个是50对吧，一个是50，那第一个就是50，第二个就是什么呀？诶就是一个100，那第三个就是一个一百五啊，它是按照这个比例去分配的啊，比例分配的，然后再来说我们这个缩，哎叫缩减的一个系数啊，F flax一个shrink啊，那这个时候它是一个缩减系数，它默认也是一个一，那这个是一个我们这个弹性元素的一个什么呢？哎，弹性元素的一个。

缩减系数啊，缩减系数，那这个时候就是哎，当我元素多大的时候，比如说我这是一个400，那这时候我们元素就会什么呀，哎就会缩减啊，就会缩减，那这个时候它的缩减系数就是一个一，那这个一的话，它跟这个的不太一样啊，缩减系数的计算方式比较杂，计算方式比较复杂，其实也没有那么复杂，你感兴趣可以查一下，我们课上我就不说了啊，你可以查一下，主要是你知道它这关系，它没什么用啊，没什么用，那总之它是根据什么呢？我们这个缩减多少是根据什么呢？根据我们这个什么呀？哎缩减系数，哎缩减系数和什么呢？和我们元素大小来计算，哎来计算的，所以这个时候哎，你不一定我它实际上它就是你不一定我们这个，你这个缩减系数大，你就缩的多，有可能什么呢？哎，比如说我这元素特别。

我这元素特别小，我缩减系数可能挺大的，但是我另一个元素特别大，它的缩减数挺小的，那这时候可能这个大的比这个小的要缩的多，所以它是根据缩减系数和你大小来计算的，总之就是哎，综合你这两个东西，一个是你的缩减系数，还有一个大小，那基本上的一个理论就是元素越大你缩减的就什么呀，就越多啊，元素越大你就缩减越多，它这个算法稍微的麻烦一点，我们在不说了啊，在这不说了，没没没有必要再再去说它了啊好，这个是一个增长的，这是一个缩减的，然后接下来我们再说一个什么呢？还有一个我们叫做一个flex，一个这个basis啊basis这是什么呢？Basis就是基础的，对吧，基础的这个是我们这个元素的一个什么呢？哎，元素的一个基础的一个，诶基础的一个长度吧，哎，元素的一个基础长度，那这里边你看着啊，现在呢，我把这个我把这个增长系数我给它注掉，哎注掉注掉以后呢，我它变。

长一点变成900变成900，哎呀，还涨了。这没住是吧，把这两个也都住掉，哎，不让它涨了啊，不让它涨了，那现在看着啊，我们这个S，哎，Flex basis我写什么呢？我这写一个100啊，宽度写一个100像素啊，写一个100像素，我们这一保存你会发现什么，你会发现它的宽度是不是就变成100了，这200还有没有用了，哎，没用了啊，没用了，所以flex base它是指定的我们元素的一个长度，其实我们这三个值呢，这个grow啊grow，哎，Shrink，还有这个basis，它就像我们一个弹簧的三个状态，弹簧最开始状态是不是静止的，哎静止的时候它的长度是由谁指定的，由这个basis来指定的啊，它是一个基础的一个长度，那我弹簧能伸多长由谁决定呢？哎，由这个grow来决定，对吧，能伸多长，哎，我这越大甚子越长，我这弹簧能缩多短由谁决定呢？哎，由这个SH来决定啊，所以它们三个属性实际上就是一个弹簧的三种状态啊，各种状态，那这个值的话，其实它现在跟我们这个。

BY是不是等于冲突了，等于冲突了啊，所以注意这个值指定的什么呢？指定的是哎，我们这个元素在这个主轴上的什么呢？主轴上的这个基础长度啊基础长度那注意了，如果主轴是什么呢？如果主轴是横轴，横向的横向的哎则该值哎横向的吗？哎该值指定的就是我们这个元素的一个什么呀，宽度啊宽度，如果主轴是我们这个纵向纵向的哎则哎该值哎指令的是什么呢？

哎，指令的就是我们呢，就是我们元素的一个这个高度啊，元素一高度，所以它的基本上它的作用跟那个wise和hi是有重复的啊，它们是有重复的，所以这个东西注意了，如果哎它的默认值什么呀，它的默认值是凹凸，哎凹凸默认值是凹凸啊凹凸，那这个时候注意它的一个默认值是一个这个凹凸啊凹凸表什么呢？诶表示参考元素自身的这个高度或什么呀，或宽的，所以这个时候你写凹凸了，那就它就等于什么呀，不管它了，就看什么呀，看你元素自己的，你外写的是200，我这是200，你写的是100，这就是100，如果什么呢？哎，如果传递了什么呢？哎，递了一个这个具体的数值，哎具体的数值。

哎，择什么呢？哎，则以该值为准啊，该值为准，所以这个值的话，基本上我是不是特别习惯去用它，一般我都是凹凸，一般我都是以这个高度宽度为准，我这样用起来会更灵活一些啊，更灵活一些好，那这个就是我们说这三个值啊，一个是grow，一个是base basis，还有一个是我们的凹，然后的话我们就要说了，这三个值是实际上我们用的时候，不推荐你这么去用，不推荐你一个一个用，我们有一个什么呢？我们有一个简写属性叫一个flex，它可以什么呢？可以设置我们这个什么呀，诶弹性元素所有的这什么呀，哎三个样式啊，三个样式，所以比如说你希望的效果是什么呢？你希望效果是增长系数一，缩减系数一，然后呢，它的一个，呃，它的一个这个基础值是一个凹吐，那你可以直接写一个一一凹吐，所以它的一个顺序啊，它的一个顺序flex是一个什么呢？第一个我们可以写一个增长，然后是一个什么呢？缩减，然后是一个我们这个基础值啊，基础值它是这么一个顺序。

有一个顺序要求这东西不能瞎写，对吧，不能瞎写，所以这个时候我们就可以通过它去指定，然后的话，除了这些值的话，它还有一些这个默认值，比如说它的默认值叫做一个这个隐一手啊，隐一手是一个默认值，默认值什么效果啊，我们来看一下，我们直接看它的这个结论啊flex flex的话，它给我们的默认值，它有这么几个值，一首引一首，就相当于是这个玩意。Init I al相当于是这个玩意FLEX01凹two，诶增长不行，没有缩减有哎可以缩减，但是这个这这个这个basis是凹凸自动的，对吧，还有什么呢？还有我们的这个凹凸。

凹凸的话，它就是相当于是一个一一凹，凹凸相于是一个一凹凸，可以增可以减，但是这个是一个自动对吧，自动，然后还有一个就是none，哎，None的话也就相当于是一个FLAG001兔，那这就比较可怕了啊，这是什么玩意啊，这个玩意儿钠就表示不缩减，就表示什么呢？哎，酶元素，我们的弹性元素没有什么呢？没有弹性不会缩也不会减，你这指定多少就是多少，所以一般情况下我们用这三个值就够了啊，三个值如果你希望它只能减，那么OK，就一一手，如果你希望可增可减，就是凹凸，那你不能增不能减，那就是一个，那那你会发现这个basis的值都是一个凹凸，所以一般这个值我们可以不不去指定啊，不去指定好，那这个是我们说的一个这个这么一个东西，对吧，这三个东西比较简单，然后再来看我们还有一个值，还有一个值，我们这个也简单在这。

来展示叫做一个O欧啊迪亚OO决定什么呢？哎，决定我们这个元素什么呢？决定我们这个弹性元素的排列顺序，排列顺序你现在来看啊，你现在看我们的一是不是在最前边啊，哎，你假如你不想让一在前边，你可以在三这写一个啊，你可以给三写一个OO写一什么呢？一你给三写一个O1，然后呢，哎，我们再给每一个都指定啊，给这个二指定一个，我们来给它来一个这个O点二，然后呢，诶给我们这个一指定一个O点三，那这样我们来看效果，那这个时候三的值小，三是不是跑前边去了，诶二的值第二，二就还在中间对吧，那一的值最最大，那A时候是就跑后边去了，你还可以再换啊，你把二变成三，把一变成二，那这个时候D就跑中间去了，也就是说我们可以通过这个O来影响它的一个排列顺序，那这个是也是一个非常强大的功能。

强在在哪儿，有了它以后，我们就不用再需要去通过结构去调整这个顺序，而只需要通过一个属性就可以改变我们元素的一个顺序啊，元素顺序好，那么到这儿的话，我们的这个flex相关的属性我们都给它说完了啊，我们给它过了一遍，但是我们要通过练习去巩固一下，那关于这个flex的话，那这里边你需要有一点需要注意，Flex它是一个比较新啊，也不算新了，其实出了挺长时间了，但是一些老版本的浏览器知持度还不是特别好，所以你在做项目的时候，如果你是移动端的话，那OK，放心用，基本上没什么问题，如果你是需要在PC端用，PC端用，那这个时候如果你需要兼容老版本的IE，像IE8这些浏览器，IEI9好点，IIE9也不是全部支持的，所以兼容G浏的时候，你要用它的话就慎重了，但是移动端的话，我们一定是推荐用这个flex，反正就是浮动跟flex，能用flex就绝对不要用浮动啊这种。

很简单，好，Flex，我们就说完了，待会儿我们来做一个练习。