尚硅谷前端基础 (131)

好，那么接下来我们来进入到我们下一个话题，新建一个文件夹先。也是一个比较重要的，也是比较有意思的一个东西啊，我们来一个一零叫做一个flex。嗯，Flex呢，这个东西我们中文叫过来，我们叫做一个弹性盒，弹性盒哎，点一个名，诶flex这个词我倒是一直没有查过，它是什么意思，我们查一下啊flex flex的话，你看屈伸活动什么什么东西是吧，这么意思就是伸缩的意思呗，对吧，伸缩的意思flex，呃，Flex呢，这块我们来说一下啊。这个我们之前啊一直在讲这个布局，对吧？网页里边最麻烦的也是一个布局，我们之前可能布局的手段像什么浮动啊，像什么定位啊，诶都是我们之前一直在用的一个布局手段，而我们这个flex它叫什么呢？诶叫做一个弹性核，诶弹性核或者也可以叫什么呢？也可以叫做一个伸缩核啊伸缩核它是什么呢？它是我们这个CSS中的什么呀？哎中的这个又一种，哎又一种布局手段，哎，又一种布局手段，哎所以其实很简单，它就是一个布局的一个手段，它主要用来干嘛呢？哎，它主要用来，哎代替谁呀？哎代替我们这个哎浮动，哎来完成我们页面的一个什么呀布局，还记得我们之前去讲这个浮动是吧，浮动的主要作用，其实对我们来说，主要作用就是让这个元素能给它横向排列啊，通过浮动可以让这个元素横过来，对吧，横过来，但是浮动的话，其实它会带来很多问题，那浮动的话，我只要一浮动的话。

哎，元素的话可能就脱离分档流了，脱离分档流就导致这个负元素的一个高度就就塌陷了，对吧，它会存在有很多的问题，而这个flex就是在我们这个CS3中，为了解决浮动布局所带来的问题，而提出这么一种新的布局的一个方式，这种方式可谓是一个非常非常强大的方式，那基本上有了它以后我们就可以不再用浮动了，哎，但是你说了老师那你为什么还要讲浮动了，哎，因为如果你做的是一些比较新的项目，比如说你是移动端，哎，比如说你需你不需要兼容老版本浏览器，你就用flag就行了，但是如果你需要还是需要兼容那些老版本浏览器，那么浮动还是一个比较兼容性相对来说比较好的选择，但是以后未来的场景的话，一定是flex用的会越来越多啊，越来越多，那flex叫做一个弹性核，伸缩核，那什么是弹性，什么是伸缩呀，哎，那你就可以很形象，你可以把这个flex呢想象成。

是一个弹簧，当你设置了这个伸缩盒以后，你这个元素就变得像弹簧一样，诶可以干嘛呢？诶可以伸开也可以什么呢？也可以缩回去啊缩回去所以这个什么呢？诶伸缩核，我们这个flex，诶可以什么呢？诶可以使我们这个元素具有什么呢？诶具有弹性，让什么呢？让元素可以诶跟随我们这什么呀？诶液面诶跟随液面的这个大小的改变，大小的改变而改变，所以就这么一个非常非常简单的作用，就是你设置完这个伸缩口以后，它可以什么呢？哎，你屏幕宽了，我这东西就大了，你屏幕小了，我这个东西就就小了啊这么一个好，我们来写个东西看看效果先，子弹要标签在这里边呢，我们先去除一下默认样式啊子带，诶这叫什么呀？叫做一个这个诶MARIN0，诶，然后是一个PA掉零，然后呢，我们把这个list style也给它去除掉啊，来一个这个no，然后呢这啊。

我们来写一个ULUL里边呢，我们给它写几个L啊LL写个数字吧，一二诶三，我们先写三个啊123，然后呢，在这儿我们来给他们设置一个样式啊，先给ul设置一个样式，U呢我们宽一点，Ulu的外呢，我让它设一个800像素啊，800像素，然后呢，我给他设置一个borderder borderder是一个像素，哎哎十呃十个像素吧，十个像素，然后来一个red，然后呢是我们一个这个solid啊，那这样我们屏幕里面就出现这么一条这个边框啊，但是现在你会发现我们这个Li他们现在都是垂直排列的，对吧，我来给Li设置一下下，Li的话，我来一个是一个这个一百一百素，哎，然后呢也是一个100像素啊，然后呢，给他们来一个background background color，我给它来一个井号，一个别飞，但是这样设置完了以后，导致我这些所有的是不是都变成这个颜色了啊，所以我再单独给他们设置一下。

啊，我们来一个n th child的，我先来一个二呢，我给它来一个background color，我们来一个这个pink吧，哎，粉色的，哎，然后呢，再来一个Li，我们冒号一个n th nth child nt child，我来一个什么呢？来个三三的话，我们给他来一个background color，我们来一个这个orange啊orange，那这样我们就得到了三个不同颜色的盒子这个字啊，我可以给它设置大一点size size，我来一个50像素啊，50像素诶，然后呢，我们给它来一个这个TLA，我们来一个center啊center，哎，然后呢，哎，我们再给他设置一个这个line hat也来一个什么呢，100像素啊，让这个字在这盒子中间居中啊好，那现在呢，我们就得到了这么一个最原始一个状态，很简单的一个结构啊，外边是一个这个UL啊u ly，然后里边呢，是一个这个LY对吧，LY，那我们可能最典型的一个作用，就有时候我们希望让我们的元素三个核横。

过来啊，横过来怎么办？那我们可以直接来一个float，来一个left，这样一保存这三个盒子是不是就横过来了，但是也很明显的看出来了，那现在我们这一块，现在我们的一个ul的高度是就塌陷了，哎，高度塌陷了，那这是我们浮动带来的最典型的一个问题，所以一般情况下，嗯，如果有了伸缩核以后，那我们就不建议用浮动了，因为伸缩核它减少了很多浮动带来的问题，并且给我们提供了很多更方便的一个写代码的一个方式，所以这个时候我们要怎么去设置这个弹性盒，怎么去设置这个伸缩盒，那这里边注意了，我们要先说两个概念，在我们这个弹性盒，弹性盒这第一个我们叫做一个弹性容器啊，弹性容器，第二个我们叫做一个弹性元素啊，弹性元素先说我们什么叫弹性容器，那注意了，我们要使用我们这个伸缩核，哎，弹性核吧，哎弹性核我们必须什么呢？哎，必须。

间将一个元素设置为我们叫做一个弹性元素啊B弹性容器啊，必须得先将一个元素设置为弹性容器，那谁怎么设置弹性容器我们什么呢？我们通过这个第4DISPLAY display诶来设置我们这个弹性容器怎么设置两种方式，一种我们叫做斯display p display叫做一个Lex啊flex，那这个还有一种叫什么呢？还有一种叫做迪斯play，诶叫做一个inline flex诶那两种的话一看能看出来上边是设置为什么呢？设置为我们这个块级的一个弹性容器啊弹性容器那这个呢，是设置我们什么呀？诶设置为我们这个行内的这个弹性容器啊就这么两种区别，一种是flex，一种叫做inline flex呢，那一般情况下我们都用flex，所以这个时候谁叫弹性容器直接。

他说那就是你的display的值是flex或者是inline flex，那么你就是一个弹性容器，所以这个时候我们是不是想对这个U里边这个Li进行布局啊，哎，所以毫无疑问我们应该让这个ul变成一个弹性容器，所以这里边我们来将什么呢？诶，将我们这个ul设置为弹性容器啊，弹性容器直接来一个this play，我们来什么呢？叫做一个flex，这样它就变成了一个弹性容器了。哎，那注意了，现在你先不用看结构诶，你就看效果，现在我们的这个ul就变成了一个弹性容器啊，弹性容器那当然你也可以用什么呀，你也可以用inland flex，那不同点就是它也是行性，也是弹性容器，不同点就是inline flex，它不会独占一行，如果它下面有东西，你会发现它能干嘛呀，哎，是不是能在它边上，但是如果你是一个flex。

这个时候他就会独占一行，这哥们是不是会被挤下去，诶，所以就这么一个区别，一般情况下我们都会用这个，诶flex in life in life flex相对来说用的比较少啊，那现在注意了，Ul就变成了弹性容器啊，弹性容器好，那接下来我们说第二个概念，叫做一个弹性元素，那什么叫弹性元素呢？那注意了，弹性弹性喝氨弹性弹性容器的子元素，容器的子元素是什么呢？是弹性容器，或者有时候我们也称为叫弹性像啊，弹性像啊，你还老写写反了是吧，叫做弹性元素，或者有时候也称为弹性像啊，弹性容器的子元素是弹性元素，那现在我们来看我的ul，我是不是设置了一个display flex呀？哎，已经设置了display一个flex，那现在ul变成了弹性容器了，那此时它的子元素也就是L。

就已经自动变成了弹性元素啊弹性元素注意我们这说的是子元素，假如说ul里边还有个子元素，有个div，那我问你了，Div是不是弹性元素，Div不是只有弹性容器的直接子元素才是弹性元素啊，弹性容器的直接子元素才是弹性元素，这是不是等于是后代啊，后代不管啊，只管子元素啊，只管子元素，但是注意我们一个元素干嘛呢？诶，我们一个元素可以同时是弹性容器和什么呢？和弹性元素，所以啊，在这儿我也可以给Li去开启display一个什么呢？Flex啊flex display一个Lex，那这个时候我的Li就同时又是弹性容器，又是弹性元素了，它是它子元素的弹性容器，哎，同时呢，它也是它负元素的弹性元素，懂这意思吧？哎，它可以同时的啊，可以，同时也就是说我的这个flex是可以有这个嵌。

套的啊，可以有套，诶我这烂的我怎么给删了。诶，我们来改过来啊，补充一下，刚才我给撤销没了，这个是我们的一个弹性，弹性元素可以什么呢？诶可以同时是弹性容器啊，这两个没有冲突啊，没有冲突，我把这拉写上啊拉，Head是一个这个100个像素保存一下，好那接下来其实我们就注意到了，当我们给这个ul设置完了这个flex以后，你会发现我设置完了以后，我整个元素是不是就。

就横过来了，哎，就横过来了，那接下来我们来说一下，那我们既然要分成两种，一种是弹性容器，一种是弹性元素，那么接下来我们说的所说的所有样式都分两类，一类是给容器设置的，还有一类是给元素设置的，懂意思吧，分两类，第一个我们先说容器的样式，先说一个，那现在你会发现，当我们设置完这个flex以后，现在我的这些Li是不是默认就变成横向排列了，还竖不竖着了，不竖着了，你一设置完了flex子元素就默认就横过来了啊横过来了，那我怎么来修改它这个方向，哎，我们这里边有一个样式叫做一个Le的一个direction direction叫什么呢？叫方向啊，叫方向我们先看看啊，我先设置一个column啊，Column这一保存看完了元素是不是就纵向排列了，哎，纵向排列了，那这里边注意了，我们来说一下。

Flex，诶，Direction direction叫做一个方向flex direction它用来指定什么呢？指定我们这个容器中弹性元素的一个什么呢？弹性元素的一个排列方式，排列方式啊，排列方式，那我们的可选值，我们来说一下可选值有什么呢？第一个值我们叫做一个肉，肉这一保存，你看肉什么意思，好，那我们设置完肉以后就表什么呢？表示我们这个弹性元素，诶，它是一个默认值啊，它是一个默认值，默认值我们的这个弹性元素在这个容器中干嘛呢？水平排列啊，水平排列，嗯，但是这个东西呢，它不绝对，我这么说，严格意义上讲它不对，为什么不对呢？因为有一些国家，像我们中国的话，默认我们写字是横着写的，从左往右写的，对吧，从往右写的，那这个时候我们写肉。

后的话，那就是水平排列，它是什么呢？它是左向右排列啊，左右排列，但是还有一些国家，他可能写字它是竖着写的，从上往下写的，那对于他来说，这个肉可能就是自上向下的，懂意思吧，跟国家不同，语言习惯不同有关系，但是我们一般我们现在也不用考虑，我们就考虑我们自己的情况，好吧，我们不考虑别的国家，那所以这个时候对我们来说肉那就是从左向右派啊，从小右派，而我们这个还有什么呢？还有一个我们叫做一个肉rewards啊，肉res，你看这是什么效果，哎，肉rewards rewards表示一个反向的啊，反向的。

这个就有点像我们那个肉，其实有点像我们这个float left，这就有点像我们这个float left，是不是向左浮动啊，哎，向左浮动肉rewards叫什么呢？也是弹性元素，哎，在我们这个容器中干嘛呢？哎，也是水平排列，但是它是什么呀？反向水平排列，反向水平排列，那这个时候它是干嘛的呢？它是自由向左了啊，自由向左了，从右边贴过来，自右向左去排列，所以你要注意他们俩一个区别，一个叫肉，一个叫做肉rewards啊，一个是正着排，一个是反着牌啊，反着牌好，然后再来看我们还有一个玩意儿叫做column column叫什么呀？哎，叫列，那column的意思就是竖着排叫什么呢？弹性元素叫纵向排列，哎，纵向排列也就是说什么呢？它是自上向。

下的啊，自上向下的，那还有一个值你猜也猜到了column rewards干嘛呀，反过来自下向上拍啊，自下向上拍也是啊叫做什么呀，反向纵向排列，哎，它是什么呢？它是自向自向向上排，所以其实你会发现，你会发现对于我们的这个，对我们的这个弹性弹性模型，弹性核模型的话，其实我想改变这个元素的排列方式，它是非常非常简单的，我只需要给它干嘛呀，我只需要设置一个flex direction，它的方向，我是不是就想怎么改就怎么改了，哎，并且这个flex direction它实际上是一个什么呀，它实际上是我们容器的属性，也就是说我只需要写一个，我用不用说给每一个Li都设置啊，不用你给那个容器一设置，它是不是就自动生效了，哎，所以排列起来非常的容易，那所以。

我要想让它从这排，那我就直接设置一个肉或者不写，是不是就变成一个横向排列了，哎，横向排列了啊，所以第一个我们叫做一个flex direction啊，是我们设置我们弹性元素的排列方向，那这里边注意了，那这里边我们又要提到两个概念啊，提到两个概念，这个是在我们这个弹性，哎弹性核里边非常非常重要的两个概念，一个叫做一个主轴，还有一个叫做侧轴啊，一个叫做主轴，一个叫什么呢？一个叫做侧轴。侧轴什么叫主轴啊，什么叫主轴？那注意了就是什么呢？哎，我们的这个元素，我们这个弹性元素的一个排列方向称为什么呢？称为主轴啊，弹性元素的排列方向称为主轴，所以现在你看我们现在如果是肉的话，那么我的主轴就是什么？你看我的元素是从左往右排列的呀，那我这个主轴就是从左往右的，所以主轴就是这个横向的水平方向的，懂这意思吧，如果是肉就是从左往右，所以肉的话，主轴什么呢？主轴自左向右，自左向右，那我们如果我这写的是一个肉，Reverse row reverse，那么主轴就是自右向左啊，轴就是自右向左。

主轴是一个自用向左，我后边我就不写了啊，总之主轴就是我们元素排列方向，你从这边排过来123，那么OK，主轴就是从左往右的，你从这123，那么轴就是从右向左的，同理，如果你是column，你是column。哎，你是column，那主轴就是自上向下的，对吧，自上下的，如果你是column rewards啊column rewards，那么你的主轴就是什么呀？哎，你的主轴就是自下向上的，所以你要考虑主轴是什么，主轴可能是水平的，可能是垂直的，它由你这个flex direction决定，也有一个方向，对吧？可能是自上向下，可能是自左向右，也可能自由向左，也可能是诶自下向上的，你要注意这是我们这个主轴啊，主轴先记住了，所以其实也可以一定意义上来讲，我们这个flex direction实际上也是在指定主轴，如果我写的是肉，那么我就指定我们这个水平方向，这个是主轴，它是自左向右去排列的啊，这叫一个主轴，那什么叫侧轴呢？哎，与我们这个主轴垂直方向的称为什么呢？诶称为侧轴啊，称为侧轴，所以你如果主轴是水平的，那么侧轴就是什么。

垂直的，如果主轴是垂直的，那么侧轴就是什么呀，水平的，所以它就是一个坐标系，主轴一，你横的是主轴，那么竖的就是侧轴，你竖的是主主轴，那么横的就是侧轴，有意思吧，先区分这两个概念，但我们要展示啊，现在先记一下，好，那这个是我们简单演示一下啊，第一个flex direction，这是设置我们这个元素弹性元素的排列方式，但是注意它是弹性容器的属性，也就是说这个东西你不能给Li设置，应该是给这个u Li，因为它是容器，给容器设置的啊，给容器设置的好接下来再看，那接下来我们再来看我们的一个弹性元素啊，弹性元素，弹性元素这里边我们要说一下了，哎，老师你不是说它是弹性元素吗？怎么体现出弹来了？哎，那痰的一个特性就是它得能什么呀，能伸，然后还得能缩，所以叫伸缩核嘛，但是现在你很明显。

我的Li现在是不是就是100乘以100啊，有没有体现出这个伸缩的特性，没有啊，没有来，那我先给它手动调一下啊，我把宽度给它调高一点，我调调宽一点对吧，调宽一点，它现在并没有体现出这个伸缩的一个特性，你为什么没有体现出，这是不是还有阔呢？这有括他们有没有占上没有占，所以这个时候并没有深的一个特性，那这里边我们来说一下，我们怎么来设置，那这时候啊，我们要说一个这个弹性元素的属性，弹性元素的一个属性，我们说第一个我们叫做什么呢？叫做一个flex flex一个叫什么叫成长啊，叫成长，所以这个是我们的什么呢？诶，这个是我们这个flex grow指令什么呢？它用来指令，指定我们这个弹性元素的一个什么呢？元素的一个伸展的，伸展的一个系数啊，伸展一个系数是。

Miss先写上我们看效果，它的默认值是零，默认值是零，你写上以后没有任何变化，因为默认值就是零啊好，我改一个啊，我把格肉改成一，看效果改成一了，这时候看发现什么了，发现现在是不是我三个盒子就是把我们整个这个复元素给占满了，哎改给占满了，所以flex grow用来干嘛呢？它指定就是当我们这个副元素有什么呢？诶有多余的空间时啊，有多余的空间时，我们什么呢？哎，我们这个子元素，子元素如何什么呢？如何伸展啊，如何伸展，那如果你是零，零就表什么，就表示不伸展啊，就表示不伸展，就这这有有空就有空吧，我就不伸展，那这个值呢，我可以为每一个元素分别设置，哎，比如说我们这来一个啊，我来一个一，来个一，我先在这写啊，我先在这写，我先写一个flex是一个一。

那这个时候你会发现什么呢？发现现在他们是不是一边打诶一边打，所以这里边啊看着啊我改一下CTRLCCTRLV，我让一是一二呢，哎是二，然后三呢是什么呢？是三是三，那这个时候你看什么效果，看什么效果，是不是3:2:1都大呀，哎一最小二是不是其次呀，哎其次，所以这个时候注意我们的什么呢？哎，我们这个复元素的这个剩余空间啊，剩余空间会什么呢？会按照我们这什么呢？哎，按照我们这个比例诶进行什么呢？进行一个分配啊进行分配，举个例子，呃，比如说啊，比如说我负元素的剩余空间是600，是600，比如说是600，那现在你child的一的G肉是一，二是二，诶那这个三就是三，那现在意味着什么，我这富裕的空间，一占一份二占。

两份三占三份，那整个600是不是分成六份啊，哎，分成六份，那一增长会多少，增长多少呢？加一百二呢就加什么呀，加200，那三呢就什么呀，就加300，也就是说按比例分配，换句话说，你这个值越大，它增长的是不是就越多呀？哎，值越大增长就越多，所以这时候你会发现我们这个三就变得比较大，因为它这个数值是不是就比较大呀，哎，如果你把一变成零，你把一变成零，那这时候一就干嘛了，就不增长了啊，你可以分别去指定，就像什么呀，这东西就像弹簧那个，哎，我这弹簧我可以抻多长对吧，我可以拉到多长，那这个就是一个它的一个效果啊，它的一个效果好，这个是我们叫一个flex肉啊，它是生长的系数，默认值是一个什么呀？默认值是一个零啊，默认值是一个零，那这个时候其实你会发现我指定完这个嗝肉以后啊，你会感觉我这宽度就没用了，对吧，因为它增长了嘛，啊它增长了嘛，就像一个弹簧一样啊弹簧一样，那还有什么呢？我有增长系数。

是不是还有一个伸缩系数啊，哎，那怎么缩呀？哎，我先把这些啊都给它住了啊，我现在不让它增长了，不让它增长了，那现在注意了，现在我的是这种情况对吧？这种情况那现在我们来看啊，我三个子元素宽度是200加一块是600对吧，600，我的负元素的宽度是800对吧？那我如果负元素也是600，那你说这时候你会发现什么呢？正好能容下对吧？正好能容下，然后呢，我这如果换成了300以后，你会发现干嘛呢？还是正好能容下，为什么？哎，那就是因为当我负元素变小以后，我的子元素跟着干嘛了。

也跟着抽抽对吧，也跟着抽抽了，那这个时候看着啊，我现在改成一个500，那他们是怎么抽抽的，你看现在他们三个是不是变得一边大呀，诶变成一边大缩减的是一边多的，那这里边我们有一个叫做收缩的系数，我们叫做一个flex，一个SHNKSHNK叫做什么呢？叫做一个收缩的系数。这个啊，我们在这儿写吧，在这儿写这个是指定什么呢？诶指定我们这个弹性元素的一个收缩系数啊收缩系数什么意思就是当哎当我们这个复元素中，复元素的中的空间不足以什么呢？不足以容纳我们这个什么呢？哎所有的子元素是如何什么呢？哎如何对我们这个子元素进什么呢？诶如何对子元素进行收缩，诶进行收缩它的默认值是一，那默认值是一，所以我这写一个一，你看我想要跟没写是一样的，默认值是一，你说等比例收收缩啊，每一个都缩那么多是吧，等比例去收缩，那这个时候如果你改成零，你注意效果了，干完了就不收缩了啊你零我我就是死在那了，我就我就固定我不能就就这么长了，不能收缩了，所以如果设置零，就意味着它就不会去。

收缩了同样也是一个道理，值越大缩的就越多，我给他指定一个一，给他指定一个这个二，给他指定一个三，那很明显三最后就会比较比较小，因为三是不是收的比较多呀，哎，缩的比较多，他这个收缩的算法比较复杂，我们先不说了，待会我们去简单理一下，但是现在你就知道我们这两个东西啊，两个东西总结一下啊，总结一下我们现在说的是一个弹性核啊，弹性核，弹性核这里边呢，我们说到两个概念，一个叫做弹性容器，一个叫做弹性元素，谁是弹性容器，你谁设置了display flex，它就变成了弹性容器，或者是display阴暗flex，谁是弹性元素，弹性容器的子元素就是弹性元素，那这里边我们可以通过flex direction来设置我们这个弹性元素的一个排列方式啊，Flex direction。

来设置我们弹性元素的一个排列方式，然后它同时它还指定了一个我们这个轴，主轴，谁是主轴，谁是侧轴，如果你是肉，那么横向就是主轴，如果你是column，那纵向就是主轴，注意区分一下主轴还有侧轴，然后这个是我们说弹性容器的属性flex direction，还说了两个我们这个弹性元素的属性flex，还有一个flex，一个drink，它是用来指定这个增长还有伸缩系数的，也就是说它规定了我们这个元素如何伸缩，如何去，诶如何去伸缩啊，就是我你多喝点，我少喝点，是这么一个啊规定这个事儿的好，那这个呢，我们就先说这么多，不多说了啊，先说这么多，然后呢，我们可以，哎，就留一个简单的练习，哎，你们想一下，我能不能，或者说你能不能尝试着用这个弹性盒做一个简单的一个。

导航条，哎，那我要求这个导航条呢，诶它可以根据内容的多少自动去干嘛呀，诶自动去伸缩啊，综艺伸缩想一下啊，我们这先停一下。