尚硅谷前端基础 (133)

好，那么通过刚才的练习，我们应该对弹性盒有一个简单的理解了啊，那接下来呢，我们就来开始展开的来讲，我们这个弹性盒的属性刚才也说过了是吧？弹性核分成哎两部分，一个是我们叫做一做弹性容器啊，一个我们叫做弹性容器，还有一个我们叫做弹性元素，对吧？我们先来说弹性容器的一个样式，弹性容器的一个样式呢，在这里边我们把这个代码啊复制过来啊复制一遍。运行一下啊，然后把这些没用的呢，我们先给它去除掉啊，留下一些我们要说的东西啊，这些都不要了。呃，这堆呢，也都不要，我们就恢复到一个这个最初的状态啊，最初的状态。都去掉啊，这也都不要啊，那现在呢，我们就变成一个最初的状态，U Li里边Li Li的话现在都是，呃，都是竖着排列的，对吧？那现在我们先来给U诶设置我们这个ul为这个弹性容器啊弹性容器那我们就直接display，我们来一个flex啊，设置它为弹性容器，那这样的话我们元素就已经横向排列了，对吧？横向排列了，那我们也说了第一个，我们说我们可以通过这个flex的一个这个direction啊，Direction可以来设置它的一个这个方向对吧？排列方向这是我们说的第一个，然后呢，接下来再来说我们还有一个跟它诶相关的就一个Lex，一个raplex，一个rap是什么东西呢？哎，那这个东西设置我们先不说它啊，我们这样，我们先把我们这些所有Li的那个，呃，那个。

伸缩系数，那个缩减那个系数，我们先给它设置成什么呢？设置成零，也就是说我现在呢，让我们的所有的u Li Li，它不会收缩啊，不会收缩，那现在就出现一种情况，现在我们这个元素是不是从这溢出了，哎，从这溢出了，那接下来我们就可以说这个flex rap flex rap设置什么呢？设置我们的这个元素弹性元素是否自动换行，设置我们这个弹性元素它是否什么呢？是否在我们这个弹性容器中自动换行，也就是说当我的这一行满了以后，它会不会换到第二行，那它的默认值叫做一个no rap no rap，那就是什么呀，不换行啊，不换了，来我们来说一下它的一个可选值，可选值第一个我们来说一下，叫做no rapper，它是一个默认值，我们元素不会什么呀，哎不会自动换行，哎，不会自动换。

那么明显，那就还有一个可以换行的值，换行的值呢，我们就叫做一个rap，哎会自动换行，哎你看哎元素自动换行，对，这是我们这个元素沿着什么呢？我们这个辅轴方向，诶自动换行，什么叫辅轴方向，现在我们的主轴是从左向右，那么辅轴就是一个从上向下的，所以它是不是第一行满了就换到第二行，它往下走，这是沿着这个辅轴方向，那如果你这儿是一个这个你你的，比如说你是column是吧，你这儿是这个纵向排列的纵向排列，如果要换行，那现在没买是吧，如果要换的话，那就换这儿的是吧，沿着这个辅轴方向换行嘛，对吧，沿着辅轴方向换行，好，这个是我们说的一个它然后的话还有一个，还有一个我们说了，这个是我们叫做一个rap的一个这个rewards啊，RAP1REWARDS，你看它干嘛了，三数跑上边去了，哎跑上面来了，那这个rap表示什么呢？哎表示我们这个。

元素哎，沿着我们这个主轴什么呀，反方向换行，反方向换行，因为我们现在元素是一个自上向下排，就是这个辅，辅轴是自上下，诶这是主轴了啊，应该是辅轴辅助的辅啊，辅轴沿辅轴方反方向换啊，我辅轴是自上向下的，就这种情况是自上向下的，那这个时候本来应该换到第二个啊，如果是rap就是往下走，如果是rewards呢？诶你辅轴不向下吗？OK，你反着换，那么就跑上边去啊，所以rewards是沿辅轴方向，辅轴的反方向去换，所以换行的话都是对应辅轴来说的啊在辅轴上如何换行，这是我们这两个属性啊，Flex rap flex，这个direction，那这两个属性对应的有一个叫做flex flow，这是这两个属性的简写属性，哎，这是一个可以什么呢？这个是我们这个rap。

和什么呢？和这个direction，呃的一个什么呀，简写属性，换句话说，它的意思就是它可以同时设置那两个属性，并且它也没有顺序要求，比如说我写一个肉，然后我们再写一个这个rap啊rap那这个时候就是什么呀，横向排列，然后呢，换行啊，然后换行，诶这是啊写一啥呀，应该是flex flow啊flex flow这一保存是不是这个效果呀？哎，它是一个简写属性啊，他们俩简写属性好不多说了，然后再往回说，我们把这UI的宽度得改大一点了，改成800，哎改大一点了，那这里边我们要说一个叫什么呢？叫做一个a land，一个这个content啊a land一个这不是justified一个content啊，Justified一个content这是什么玩意儿，那注意了。

我们现在看我们主轴，也就是对于我们现在来说是一个横向的主轴方向这块是不是有一块空白啊，哎，空白我们现在没让元素去伸展开，当然展开了就没有空白的，对吧？现在是有空白的，有空白那扎在content是干嘛的呢？诶是表示我们这个，诶如何分配什么呢？哎，分配我们这个主轴上的一个这个空白空间啊主轴空白空间或者说其实就是主轴上元素如何排列，哎主轴上的这个元素如何排列啊，如何排列，所以这里边我们看到第一个值叫做一个flex star，我们来说一下啊，它的一个可选值fle star flex就是弹性和的意思，对吧，Start开始，那这个表什么意思呢？哎，表示元素沿着我们这个主轴的一个起边排列啊，主轴的起边排列，主轴起边在哪？主轴是不是现在是从左往右的呀，那起边就在左侧，所以这个时候你看我元素是靠左的啊主。

起边排列，元素都沿着主轴起边排列，那意味着如果有空白的话，空白是不是在最后，哎，在这个中边啊在最后，那同样还有我们叫做一个flex的一个这个end啊flag end，这叫什么呢？叫做元素沿着我们这个主轴的一个中边排列啊主轴中端排列，所以你这如果写的是一个flex n，这个时候干嘛了，元素都靠这边排了啊，然后这里是不是就留出一个空白了，那沿着中边排列，那那么那么空白就跑到什么呀？跑到左侧了啊跑到左侧了，然后还有一种我们叫做center CT呀，CT呀，那center表示什么呢？诶元素居中排列啊，元素在我们这个主轴当中居中排列，那这样的效果就是它的空白就会分布在什么呀？哎，分布到两边了啊，分布到两边了，这个叫做一个center啊，这一个center这是我们三个值啊，比较好理解的，Flag start主轴起边，Flag主轴中边，Center是我们这个居中啊。

然后再来看的话，我们还有几个值，我们在这儿来看吧，叫做一个space space的一个around啊，一个around，这叫什么呢。这叫做空白。分配，诶，分布到我们元素两侧啊，元素两侧什么意思？哎，现在我有空白，比如说我三个元素啊，我赋予了300像素，这300像素是空着的，那我有几个元素啊，三个元素那我就除以三得一个100，那么OK，一左边是50，右边是50，二左边是50，右边是50，三左边是50，右边是50啊给他们分布到每一个元素的两侧，所以这样你就会看出一个效果，边上距离会窄一些，中间的距离会大一些，为什么会大一些呢？因为这样的话，因为这块是两个距离，所以它就比边上要大一些啊叫做space around，那跟它类似的有一个叫做space，一个even，那这个是什么呢？这个是表示我们只分配到一侧，哎，空白分布到我们这个元素的这个，哎，单侧吧，我们叫单次吧，什么意思，哎，就是说你看啊，现在整完了以后，你就发现效果就。

就是这儿的距离跟这儿的距离跟这的距离是什么是一样的，也就是我只要一侧有距离，另一侧呢没距离，那这样它就可以确保一个让每一个跟每一个之间的距离是是一样的啊，是一样的，然后还有一个我们叫做space的一个比between，比between的话，你看就是把这个距离分配到两个元，就是元素的元素中间啊，元素中间子space比寸啊，我们写第二个。

Space比between啊，空白哎，均匀哎，分布到我们这个元素间啊，元素间比嘛啊比between space evenly啊，这个东西兼容性不是特别好，有些浏览器它的支持度不好，所以这个时候用的时候一定要是慎重一点啊，一定慎重一点好，那这个是我们justify content啊，设置我们元素对齐的方式，所以这里边我们也就说到一个，那在我们的弹性盒当中，如果你想让元素水平居中的话，这时候我们就不用再什么MARGIN0凹two了，我们直接干嘛，直接设置一个justify content来一个center，它就可以达到一个居中的效果啊，达到一个居中效果好，这个是我们说的一个扎斯提content恢复原状。恢复原状的话，这里边我们为了表现一个问题啊，我们这个结构我得调整一下，或者我这复制一个CTRLCCTRLV，我复制一个把这先住了啊，他老给我报错保存一下，我们这要单独说一下它啊，改个名，这个我们叫做一个零三，因为我们这块样式改变会有点大，所以我要写一块的话，那等于刚才那个留不下了啊，留不下了好。

回到我们这零三这我们给它运行起来，哎，当然现在效果是一样的，对吧，那代码的话，我现在稍微调整一下，我要调整什么呢？首先呢，我要把我整个ul高度我要调高一点，Ul高度的话，我可以设置一个这个800像素啊，我ul高一些对吧，高一些，然后的话，现在我ul高度定了，然后呢，我让我的Li的高度呢，不定，我不给Li指定高度啊，不给Li指定高度，然后呢，我在每一个Li里加不同内容，比如说我在这个LY里，我给它加一个块元素啊，加个div，我这来一个二，哎，然后呢，这里边我写三个，我再写两个div。

哎，这来一个div，我写一个三，哎，我再写一个，那这样的话，他们三个里边的内容就不一样多了，对吧？这里边只有一行，这里边有两行，这里也有三行啊，这边有三行，那接下来我们要说的是一个叫做一个a line，一个叫做line来注意了，这里边它会有一个特点，凡是一看到这种justified justified开头的都表示主轴的，但是主轴就这一个对吧，就一个justify很content的，那凡是看到我们这种叫什么呢？叫做a land a land都是讲的是我们辅轴上的啊，辅轴上的，所以我们这里面说的是一个a land的一个items Alan items这个说的什么呢？说的是我们这个在我们的元素，哎，在我们这什么呢？在我们这个辅轴上如何对齐啊，辅轴上如何对齐，哎，那这里边我们来看一下它，它的一个ala的话，A LA items啊，那这里边注意它置的什么，它设置的是我们元素间的关系啊元素间。

哎，一和一，二和一和二，二和三就是元素之间对齐的一种方式啊，元素之间对齐一种方式，那现在我们来看一下alone it4我们有一个值，第一个值是这个值，哎叫stretch是吧，Stretch这个效果你看什么效果呢？你看我写完了以后是不是跟没写一样的，哎，那这里边我们来说一下可选值，可选值我们叫做一个Switch，它是一个默认值，哎默认值它将什么呢？将我们元素的长度什么呢？哎，长度设置为什么呢？设置为相同的值啊，相同的值也就是说它会让你所有的元素的长度是一样的啊，长度是一样的，当然现在我这是只有三个元素，如果我元素比较多的话，哎，我这比如说还有我这有一个LY，哎，我这再写一个LY，哎我们就写两个吧，哎，写两个，这还一个LY，但是现在他不会换行是吧，我们给他设置一个换行，哎，我们这来一个肉，然后来一个rapper，这下边是不是就换过去了。哎呀，这有点恶心啊，宽度呢，我们给它调小一点，调成600，让这两个都挤下去，这一保存，这挤下去了啊，然后给它们换个颜色。

这来一个四，这来一个五啊，我们这来一个yellow，这来一个巧克力，哎，这一保存那大概这么一个情况，所以你这里边我们来看到啊，我们这个默认直角的一个，诶，它是将元素的长度设置为相同的值，注意这个相同指的是什么？指的是行与行之间的，你看我第一行的高度是一样的，第二行的高度是不是又是一样的呀？哎，它指的是行与行之间的一个高度，并不是说所有的高度啊，并不是所有的高度，所以这个就是就等于是拉伸了，哎把这个你看一可能本来我没有设置高度，我没有设置高度的，它的高度是被内容撑开啊，所以一可能相对来说比较矮，但是它也会把它给拉长，确保所有的元素高度是一样的，也就是说它们是在一条水平线上的啊，在一条水平线上，然后的话，我们还有一个东西叫做flex start，哎，Lex start，这就跟我们刚才差不多了，那这个时候还会不会拉伸元素了，哎，就不会拉。

拉伸元素了，那我们说flag start是什么呢？哎，元素不会拉伸，元素不会拉伸它是什么呢？哎，沿着我们这个什么呀，辅轴起边对齐啊，沿着辅轴起边对齐，所以这个时候注意什么叫辅轴起边，那这里边现在我们的辅轴是水平方向的，那辅轴是不是这个垂直方向的，哎从上往下的，所以起边是哪就是这儿，所以它们是不是都靠上，哎都靠上，所以沿着起边去对齐的啊连着起边对齐，好，这是一个flagx的一个start，然后呢，还有X一个摁沿着什么呀？哎，沿着我们这个辅轴的一个终边对齐，哎，这是沿着我们这个辅轴的一个中边对齐啊中边对齐，然后还有一个我们叫做一个CP啊center，这叫什么呢？叫做一个居中对齐center，看看我叫什么呀，居中对齐，哎，居中对齐很简单，所以如果你有这样一个需求，我。

希望一个元素，比如说我的这个Li，我希望这个元素在我一个元素里边垂直水平双方向对齐居中，那怎么办呢？那你就是需要再设置一个just content来一个center。那这个时候就。正好就居在中间了，所以这个时候我们在我们的这个弹性核里边，它也是一个让我们元素居中的一个最最最简单的一种形式啊，直接两个center就对齐了啊，直接两个center对齐了啊，好，那这里边我们还是恢复到原状啊，然后再看的话，其实还有一个，还有一个我们用的不多，叫做一个基线对齐，贝斯line啊，贝斯line叫做一个基线对齐，基线对齐，基线对齐其实说的是就是沿着这个文字的基线，你看他们的基线都在一条线上，就是这个基线对齐，那但是就是第一行啊，这第一行这个基线对齐用的不是那么多啊，用的不是那么多，好这个是我们说的一个对齐方式啊，我们来写一个啊，换成这个flag start啊start好这么一个效果，当然现在我们这个flag star跟基线是一样的，因为我们现在这字儿大小是一样的，基线的位置一样，所以就不会涉及到不齐的，如果字儿大小不一样，基线不一样了，有有偏移了，那那时候就会有变化。

啊好，下边接着来说这个是我们Alan it，还有一个我们叫做Alan的一个content Alan content这是干嘛的呢？这个我们说了主轴上有空白空间，辅轴上是不是也有空白空间，哎，所以这个设置的是辅轴上的一个空白空间的一个分配，哎，分布，所以这个it是控制我们元素间的一个对齐的，你看我现在元素是不是上边都是一边齐的呀，哎，所以现在是一个flag start，而我们这个a content是对齐我们元素之间的这个空白的啊，空白的跟那个差不多，A content，比如说我们有什么呀？哎，有这个，有这个center啊，Center的效果你看就是什么呀？哎，让上下的空白相等元素是不是在中间啊？哎，在中间啊，值我就不写了啊，还有什么这个flex startle start，就元素都往上去靠上对齐，空白就跑到什么了，跑到下边了啊，那flagx n呢也是一样的，跟我们那个扎康的。

样是不是跑跑这来了，哎跑这儿来了，还有什么呀，还有什么这个space space around对吧？哎，环顾的两边啊，还有什么space between，哎，放在我们这个中间啊，不掩饰了啊，不掩饰了是一样的，它就是对齐我们这两堆啊，等于它其实上下是两堆，哎，这是一堆，这是一堆中间是不是有空白啊，哎，你可以指定这个空白的一个对齐方式可选值啊，跟这玩意儿都一样啊，都一样，只不过这块你要看的话，它就是辅轴了啊辅轴了好，那这个是我们的对齐方式啊，当然我们刚才说的这些都是一个我们的这个。

都是说的是我们一个这个主，这个弹性容器上的一个样式啊，都是弹性容器的，但是在这儿呢，我们要掺杂着一个弹性元素的属性，在这我们来说一下，我们在第一个Li这来说一下，我们有一个属性叫做一个a self a self a self是干嘛的呢？这个东西它实际上它是跟这个Alan it一样的，它用来什么呢？用来覆盖我们当前元素啊，弹性元素上的这个at。什么意思，你看啊，我写一个A，本来我们这个一它是不是一个flag star，哎，我可以改一个flag，那这个时候它就会特点，就是它会把一自己给拉下来，哎，你可以你也可以让一设置一什么呢？设置一个，哎，你直接把一给它拉开，懂意思吧，哎，你也可以单独为每一个元素设置这个AS，它是用来覆盖这个ala这个items的啊items好，那这个就是我们说的弹性容器上的属性，主要就是来控制我们元素的一个对齐方式的啊，看看记一下就OK了啊，但是呢，稍微有点多，你一定自己呢去写写，去体会一下它的一个特点啊，我们先停一下。