60.尚硅谷_css3_flex(新版本项目新增).wmv原创

看一下好，我们刚刚好像讲过一个东西，我把它提过来。弹性空间管理吧，CTRLCCTRLD。好，其实这个弹性空间管理里面我们只讲了一个东西，叫做black blue。干什么了吧，是吧，找你我们来看这个默认值为多少，大家觉它的，大家觉得它的默认值应该有多少。也就是说我这个我不写。我不写，你看他们有没有分配空间。有没有没有吧，我把这个写好一点，这个改成肉，这个改成杠，这个改成。是的，好周你其他应该不需要改了吧？来看一下有分配空间吧，没有吧，说明这个flag的默认值是吧？零，来看一下默认值上哪去？看好你会知道默认值这个事情在X里面极其重要。

MDN，是不是OK啊，这个我是要看一下这个文档，好让他滚一滚。好。Flex干活遭。默认指挥岛看一下。Z。不动，还在转，让它转一会儿我们的网速有点烂。不是有点烂，是极其的烂，是很烂。这么骂你了？初始值零能理解吗？好，记住的，初始值为零的。好哎，那看完的初始值，我们还得看谁的初始值啊。

老版本里面是不是有个叫什么。在那个。老版本里面弹性空间管理是谁啊，不什么。Flex。是不是好，那我只把它浏览器关了。哎，好像有同学是记住了啊，他记住肯定不是靠记的是不是，我说吧，Books干什么啊，不不不，什么不。不是吧，所以你看有没有。是不是有啊。OK，你看这个给你报是这是这个是没啥啊，说明他太老了呗，是吧？墨子道，也是零，OK，好，我们说什么，我们的Lex跟Lex books的默认值都是。

零。是不是flex grow跟什么box杠什么flex，他们的什么默认值都为零，OK，这是一个比较重要的信息，好注意。好，那再来看，再往下走是不是好，我们说来看一下的规则。啊，Flag属于定义弹性盒子什么，它的一个拉伸因子啊，它的默认值是零，来看一下它的规则在哪。因为规则。规则怎么办哇，没有规则，这没法讲。我都记不住了，这个规则。哎，这边black的规则吧，在base这块。Flag的规则，CTRLCCTRLB来看一下规则是什么样的。

90OK，可用空间等于容器大小减掉所有相邻项目base的组合，现在我有space吗？没有，没有，男的就是外甥。能理解吗？OK，然后呢，可扩展空间等于可用空间比上是吧，所有项目的。哎，这什么鬼，可扩展空间。可用空间比上所有相邻fle一个公的一个组合吧，什么意思啊，就是相当于是每一份flex所占用的一个距离呗。你看我是不是可用空间啊，比上你说的flax的总和不是一份X书占一个。空间吗？能理解吗？然后每项的伸缩大小等什么伸缩基准值加上可用空间乘以。

值那边讲我们来看一下吧，怎么算的好，比如说我这边给你打开了，来看一下我们怎么算好，比如说这边我们是480，我问你在我们这边可用空间为多少？容器大小减去所有相邻的总和吗多少？容器大多是吧，减去所有相邻项目多200没有拿的就是。外色，如果你这个轴是主轴是外轴的话，那就是。害嘛，很容易理解的解脱。乘以等于多少？100就可用空间吗？那可扩展空间等什么可用空间一百五吹多所有的兰克斯的总合吧，多。

爸，是吧，等多点是吧，每项到多伸缩基准值吧，伸缩基准值数就是这个F倍懂吗？多少50加上什么可扩展空间18.75乘以格的值，如果你是四的，那最终就等于125是吧？其他的呢？68.75，这个我们刚才已经算过了，这边就是乘以啊一是不是来看一下是不是这样的。肯定这样的吧，是过了吧，是吧，OK，那再看。没问题啊，是不是，可是如果这样我来问你，如果我第一个它的莱克斯。

贝为零咋算？或者说这样我做的更狠一点。咋穿？我问你这个值应该变，应该变成多少？可用空间等于多少？400减去多少？五乘以多少？因为你现在已经有斯贝斯把你这个外会给覆盖掉了。懂吗？我说没有贝的时候就是你外吗？因为你现在主轴是肉吗？能理解吗？那这个是应该是可以多少是吧？OK，那400除以多少。八等于多少？五八是什么？50是不是最终分分上去，这个值得等于多少？零伸缩基准值吗？零加多少？50乘以四等于200，其他的呢？

等于50，看下是不是这。刷一下。255怎么分配的？Le的分配，我问你啊，弹性弹性空间的分配。跟我这个贝有没有很大的关系？有老版本里面有吗？没有，老版本里面就拿你的外甥。能不能理解？好，OK，那OK，骨肉应该能可以理解吧，也就这个flex贝应该要理解了吧，那是不是就差这个Fla是吧。线了吧，来Le线，我们来看看，好，我们说这个叫什么Le啊。莱克斯轱辘叫拉伸因子吧，性格叫什么？收缩因子？

Coning。CTR叫做什么输缩因子是不是好？我们看是不是好，我来问，我说这个收缩因子起作用得有一个前提。什么前提？莱克斯应该成no，不然你不肯定是做的，我变成多行的。是不是它起作用，是不是得有个前提啊，你是不是只有一行，你一行我才能收缩啊。那么理解也就是说什么，我们在这边写的时候的话，你在we身上能写一个flex we等于什么？我们先来看一下吧，我们能写一个flex等于Y吗？会有吗？比如说把它改成100，那这个时候你看本来我改成100的时候，大家看有没有搜索。

啊，我把这个什么贝斯跟狗先全部干嘛去掉是吧，你看是不是我现在什么都没想来看一下，走你他应该怎么办？说错没有为什么？说明flag性名的默认值为多少？知道肯定是默认知道，不然他干嘛，不可能收错的是吧，不然么。肯定不是零啊。刷一下曾文之版本11。E往OK，记住flex看什么性格的默认值为一，那不讲，你看这个时候上来是不是就产生了一次，哎，这个就可以关掉了，这个时候上来是不是就产生了一次，是不说啊，可是你说我flex等于外，你还能收缩吗？

哎，怎么回事啊？卡了，想想你时候，刚刚我们有没有看到过这个笑话，有没有说说没有，他干嘛换行了，改变的是什么？侧走的方向，现在侧走方向往哪个方向？侧重方向是哪个方向看嘛，好，我们说这个flex外，它改变的是你侧试的方向，那现在侧重方向在哪。看测试方向是五个嘛。是不是向下了啊，能理解啊，而且一旦有了这个flas we为wep的话，还它会收缩吗？啊，它就不会收缩了啊，除非你要把这给它干掉啊，这个时候才会有收缩，我们看一下好，现在是不是这个FX已经没了，来看是不是产生了一次所说啊，大家算算这个值应该为多少。

啊，我们先不看，我们来算算这个值应该不多。我说容器是100，总共宽度。五吗？超出多少？总共有几份？默认这都是一码除以三是不，每一个爱要减多少？减30最变多少？22是吧，好，我问你。如果这样。你说浏览器或者flax会让整个元素收缩，收缩就干嘛收没了吗？如果现在我这个五五干嘛。我就大于20像素咋整是不是啊，看一下走你我问你是不是他会溢出的，你看几个字。

是不是就什么五十五十啊，能不能讲，所以说浏览器flex布局会让整个。Item所有的项目是说道零吗？不会的，那么讲你想X是没有没有这种问题的吧？你把空间加给我不就行了吗？我总能加到点东西吧，可是我性格是往你项目上面去消的。要减你项目宽度的，你想想减着减着，如果你里面的内容都看不到的可能吗？不。好的。的。

来看一下周，这是的一个规则，它规则是怎么计算的？NYCTRLCTRLV。就是每项莱克收缩的大小是不是等于你的伸展基准值减去什么收缩比例除以收缩比例总和啊，这是一个比例乘以艺术空间，这不是我们刚刚那种算法。是不是跟flex一样嘛，伸缩积攒值就是我们这个flex face减去一个值嘛。是不是一个什么值啊，跟你搜索比例有关系吗？你的搜索比例比上你的搜索例总和嘛，再乘以什么溢出空间嘛，这么一减的话，是不是你每项每项做的大小。是不是真的？这是不是我们刚刚的思路啊。是不是我问你们，是的吧，OK，可是这个思路是错的，好，我怎么给你们去验证看呢？

好，我帮你们去找一个DEMO。好，我看在那个班，我叫。CTRLC直接给你们贴过来，可以来看一眼。好，CTRLV。OK04。是不是OK，我们把刚刚那个东西我们来计算一次。好，我把这些东西全部干掉，呃，我把这个直接扣过来吧。OK，零四这边。好，来看一下我们这边写的，来看是不是做是个外法里面还是五项吧，来看一下，好，我们说这个容器宽度是100，每项五，你看是一啊，问子就是一码是不？我们说只是第一个是不是200。

这这个这个能讲OK，其实我们说这边他应该听谁的。我说我写个贝是不是一样的。有没讲听的是face的吧，只不过说我们说没有写face，那就干嘛用用是吧，那算一下来，如果按照第一种算法的每项来数，数数大小，按照按照这种算法来问你，OK，首先我们来算一下这个东西吧，输出比例为多少？收缩比例的总和为多少？五是不是OK，每一项是每一项数的比例是不是都为一啊？那是不是1/5啊，也是什么1/5去乘以一个什么？溢出空间为多少？这边是两百五吗？外外不。

一百五嘛，是不是这个应该等于多少。30吗？是不是OK？伸缩计算值，我问你第一个伸缩，第一个伸缩，伸缩计算值为多少？200吗？200多是吧，应该得多。一百七他是要干嘛，最终是干嘛。收成是吧，OK。其他呢？50减30等于多少20。是一个170，其他都是二十来看一看。你F12。是吗？一个是50，还有什么12.5吧，说明是按这种算的吗。不是吧？是不是啊，你看我们有没有算错啊，我觉得我觉得我没算错吧。没法1/5乘以一百五等于30嘛，是不是来看按这这种按这种算法，按这种什么正确的算法来算，怎么算的，首先计算收缩因子与什么基准值成的总和咋算。

受缩因子第一个数多少，他们都是一是吧，OK，也就什么一段。基准值吗？200吗，第一个。是不是OK，加多加多是吗，得多。得到是吧，是不是OK，然后就收缩因素吧，收缩因素等多。第一个的收索因素等于多项目的收缩因子乘以乘以是吧，少一乘多少200干嘛？所以多少400等于多少。等于0.5嘛，是不是1/2嘛，是不是呢，其他的呢，项目的数子是不是都是一啊，所以多少五最多吧，那多。

1/8吧，OK，移除空间应该怎么计算？你到底要移除多少？应该怎么计算项目的收缩因素吧一吧。是不是在这边第一个是1/2干嘛乘以10，空间有多少。一公斤为多少？一出空间。不对劲了。一出空间不是150。一出空间。总共外边的宽度是100吗？一出空间多百减去什么？一百八是不三是不，那我今天该乘多少300吧是不，那这个这个多少68，那是不是200减去啊60啊得多少这个减去60段。

十减没了吧，肯定不对吧，来看我们这边的。这多吗？富的一处空间吗？300吗？是不是这边。一百五嘛，下面呢。1/8多吗？等于多。等于多少？计算器300除以8万。37.5。37.5是吧，最终我们说应该是乘以负的吧，也就什么这是移除空间嘛，问你第一个项目是不是200减一百五等于50。

然后呢？多少？50减37.5等于多少12点。是不是看一下这种。瞅过眼了吧，你看52点，52点，五十二点五十二点。有没讲说flex性格的算法，这个才是最终的Le性格的算法，对不懂，一开始我们这个算法是不是错的？只不过说干嘛我们所遇到的情况没有我们这么复杂而已，我们之前遇到情况是不是都是等比例的，那你用这条公式跟这条公式干嘛是一样的，可是一旦遇到这种情况，你会发现这条公司完全是啊。错的这三条才是整个的一个规则。能不理解，OK，可是我们说这个规则上面其实还有一条什么一条，它不可能减到什么。

他减减减减减是如果你里面的内容干嘛。大于12.5的呢。他会给你简称吗？不会，你看。你看他是不会给你检测的，懂不懂，那这种规则复杂怎么复杂，他会把干嘛把你干嘛，你本身应该是不到十十二点五啊，他会把你的宽度减去12.5，那先剩下来的值按照这个规则让其他四个人再来承担。能理解吗？所以说内部是一个递归。内部是一个递归循环，能不理讲好师，你要把握住的规则懂不懂，一般我们在做布局，这些D里面的值干嘛？我们是要注意的，要去做四级的，不能太多，也不能太少。太少可以干嘛，不能太多，不然性格就干嘛，就会出问题。能理解吗？能不能理解，我刚才讲的的规则是这三条，并不是什么，并不是这一条，能不能解呢？那就跟我们刚刚这条差不多。

对，就是的规则跟我们之前想的是一样的呢，不一样的，而且还就是老版本里面弹性空间叫什么。老版本里面弹性空间那个属性叫什么？记住老版本里面是不是只有这一个性来控制这个盒子的弹性模型大，是不是它既能控制拉伸也能控制收缩，它只用一条规则，就是这条规则。因为一个属性嘛，他只用这一条规则，所以说在老版本里面是有可能会把元素给亚美的，因为它只用这一条规则，就跟我们刚刚一样，我们计计算到了复食，在老版本里面就是复食。

这个元素就没了，能理解吗？能理解，OK，那这是我们讲的，不里面还涉及到什么。Flex-BA，那么讲所有的计算规则都是在它的。基础上的，只不过一般不写就是外，或者说是。害能讲吗？到这一块，除了这个简写属性也没讲，其他的A全帮你们过完了，能讲下一次来的时候首先讲解性，其次讲他的两个实例。啊，讲讲flex的运用了。能不理解好，这边flag整个东西都比较难，前面比较难记，后面比较难理解，能不能理解啊，所以说你们要花时间去做，去去做这个东西懂吗？OK。