62.尚硅谷_css3_flex简写属性.wmv原创

好，那我们再来看一下，好，那我们首先用这个flex来做一个东西啊，OK，那我们说基础点是不是都已经做完了，是不是OK，我们什么来一个零二吧。嗯，写到哪了。重新来定一个吧，你看嗯，这个什么。主要是讲简写属性，好，讲这个简写属性时候的话，我们来一个一个经典的应用应用场景。好，CTRLCL一下，CTRLV一下。OK flex的一个经典应用场景，叫做等分布局，或者叫等比例布局，都可以用X来做，一般你遇到这种等分等比例的事情，用FX做是最好的，我们可以来看一下。好，这些东西全部干掉好呃，比如现在我有个WiFi，底下是不是I是12345啊是不是，可是我们说哎，这个全部干掉。

全部干掉，我都不要来看一下现在长什么样。没问题是吧，呃，怎么是竖着的啊，就就应该是竖的吧，这个Y是我给宽一点改成300。是吧，啊，OK，那每个为五次，总共五个，应该是两百五啊，是不是这样的，OK，那给稍微给大点大方一点，给个400是吧，是OK，可是我们经常看到的是什么呢？看到是这样啊，就是比如说哎，我们说经常说我有五个项目啊，一一般我们说这五个东西我认为要排要排到银行去，是吧，中国人的一个习惯吗？是吧，他是不是更喜惯看什么从左往右的东西。那比如说我说干嘛，我们可以用动吗。辅助特别什么，那就排到一行去了嘛，是不是，可是有些时候哎，他说我是这样。

来五是不是，而且我这边是没有宽度靠内容称段的嘛，宽度靠内容称开的嘛，是不是，你看这个宽度是不是靠内容撑开的，这个时候我们有一种很常见的需求，其实这里面是不是有五个it的，我想让它在一行上每一个艾特所占据的空间是一样的。等分布局吗？是不是怎么做浮动还能做吗。是不是就不是太友好了是吧？那怎么办？干掉他，干掉他，大家看又是什么排一行的了，那怎么办？Display是吧？Display OK，我们说Le是不是又是另外一种display的类型了，能不能讲核模型已经变了，懂吗？OK，再来看底下应该怎么讲，当它display大，他就是都默认排到行去了，然后怎么让他们等分，怎么等分。

你看怎么等分？不就是把后面的富裕空间给你干嘛？等分吗？怎么办？所有的干什么？杠应该得多一是不是就可以了，想想是不是就可以了啊，如如果你是这样的，那我就可以了，如果你的每一项的宽度都是一样的。那我确实就已经。等分了，问题是你每项的宽度是不一样的，有没有等分？没有等分只不过是把负一空间等分的，干嘛等比例的分配到项目上去了。我需要的是项目是。不是等比的，项目得是等分的，懂不懂，如果项目在我整个容器里面干嘛都是一样的，宽度上面都是等一样的吧，现在你是干嘛给我每个项目加上一样的空间吗？能理解吗？这不叫等分布局，你讲那怎么办？

怎么办？现在我每一项的宽度是不一样的，导致我最终分配上，现在我每一项的宽度是不一样的啊，我给每一项分配的空间又是一样的，导致最终他们的宽度是啊。不一样的。是不是，那怎么办？怎么办？加个什么属性？什么干什么。不多。零。想想这是什么意思啊，我把你在分配空间之前，我把你的宽度清零，分配前全部清零，相当于现在，现在可用空间应该是多少？这种情况底下可用空间多。是吧？是不是我的都是一几个。

个，把400分成五份，一份80，是不是第一个拿多少他的贝加。第二个加80最终都是是不是等分布走，你说一下看。是不是等分呢，这就是一个等分布局。能不能理解，懂吗？哪怕你超出了他也是个。怎么怎么操作啊，OK，我们说他是只有。一百八你看我刷一下，它还是一个。等分的。哎，不对，为什么，因为我们说性格是不是最终减减减干嘛。是不是只能减到什么。捡到自己的一个最值得捡。捡到什么捡到你这个什么，刚刚好能成加你的内容吧，是不是啊，来看看。啊，如果你的内容不是一样的，呃，看一下这个时候是不是也它也是个等分工具。

你看二十二十二十它也是个等分布型嘛，为什么，其实这个时候应该没有任何作用。是吧，比如说现在我让这个拉克斯线可为到。为零吧，它开始没有任何作用，刷一下你看是不是啊，为什么？因为一开始你哪怕没有这种X布局的时候，我们说每一项加起来，因为你现在倍是零嘛，想想你倍是零的话，你它能起作用吗？相当于你整个东西有超有超过你的容器吗？没有，因为你的Fla倍为零，所以说在flax眼里的话，其实你这个容器里面什么都没有。那这个性格它能起作用吗？不能，我们说性什么时起作用，当你里面的项目的宽度干嘛超过我容器的时候，我就不要减啊，它才起作用吗？现在你吗，相当于我容什么都没有，只有才能。

起作用。能不能理解啊，OK，那我们说这边新和写一有没有关系啊，没有任何关系啊是吧，还是个等分布局吧。是不是啊，说我们所以说是说什么，可是我们说一般我们做等分布局的时候的话，其实一般都是这样的，我有一个容容器，我里面有一些元素在排列，其实这个元素是没有什么占满我整个宽度的。我们为。1FLEX贝斯为零是不是就行了，是不是？那你想想我就问大家，Lex性格的默认为一，Lex的默认字为零，Le变默认值为凹马，现在是不是要变成这样，我们才是一个等分布局是吧？其实flex性格的子格马可以不用管。是不是能不理解，等下我们能遇到的需求团队会不会遇到？

会不会遇到，肯定会遇到啊，那他就给我们出了一个语法的，来了一个简写属性，来看一下TLCTR02。简写属性OK啥意思啊，你不是它的这行属性，你下面这些值一只，你看一下是不是一个来，我把它还调成300啊，我之前是不是400 OK，应该是一个什么工具啊，比如说这边1222333。是是是，干吗？看一下是什么东西。教你，哎，我不要开这个浏览器啊。那是不是应该等分过去？

是不是啊，OK，我们说你要看一个简写属性，你一定要看到它才能确认它真。是不是在这，你把这个三角形干嘛点开来，什么鬼，你看一一百分之零啊，很多人在看这个flex简切属性，他永远都搞不明白啊，他总觉得这个Lex v1好好奇怪啊，为什么能做等分？切记，我们说FX唯一并不是你grow为一，性格为一，被为凹，它把给你制成了。分之零就是零能讲他没有拿凹吐拿的话是不能做成分布局的。懂吗？好，这也是来说在等分布上面，他帮我们干嘛写了一个语法它吗？是不是语法，它有语法它的好处，好用简单语法堂也有坏处。太隐晦了，很多东西干嘛，是不是他帮你做了，你不知道，然后然后你就不懂了，那没讲，说语法堂是有好处的，可是你要知道初学者对于这个语法堂最好干嘛，离语法堂远一点啊，等你项目到干嘛，到后期学完了，整个技术上比较成熟了，再慢慢的去适应语法堂，能理解吗？啊，这些语法堂虽然说是好用，可是都是对一些说成熟的开发者来说，哎，这个比较好用啊，对于初学者来说的话，我觉得这个语法堂是比较可能的，很多东西他都看不到，那么你讲OK，这里一一百分之一，这也是我们什么，这也是我们说flex为我们等分布去做的一个什么语法堂，OK，那我这边写为二行不行。

是不是得的一样的吧。是不是啊，你是一个比例嘛。因子吗？懂吗？OK，除非你把这个爱每个的色的不一样。才不会出现这个不对，懂吗？只要你来为二也好，V3也好，V300也好。

都应该是等分布局。能理解我的意思吗？OK，这里，那这是我们说的一个flex的简写属性，能不能理解？OK，一定要跟人家说清楚flex简写属性的意义，以及它的一个用处，懂不懂，那问你用flex能不能去做垂直水平居中了。用flex能不能去做3D护具了？用能不能做两列布局了。都可以了吧，垂直水平怎么做？主轴负轴上主轴侧轴的空间都会是的吧，那不就垂直水平居中吗？是吧，三年不就什么两边固定当中吗？是不是两边给一个固定的值，不要给什么嘛。当众给个flex不入唯一吗？来的V1的话，是不是就把非公定全部给你了，两边值干嘛固定掉，那么就两边固定当做适一嘛，两略不就是左边固定，右边指是一嘛，那左边给个固定值，右边给个F为一不就行了吗？

能理解我的意思吗？OK，那用flex去做布局，像这种等比例啊，等分啊，居中啊，有规则的用flex极其的简单好用了解说在移动端Lex布局现在是大型渠道啊，什么意思？大家知道微信小程序吗？微信小微信小程序里面70%的布局都是用线。能不理解啊，而且微信小程序它需要考虑浏览器复杂吗？只考虑QQ浏览器腾讯的东西吗？微信里面欠的就是什么？QQ的叉五内核吗？懂吗？所以说QQ浏览器它其实没有太大性问题。啊，不是说没有太大金融行为，太大金融为机器好简单，腾讯内部跟干嘛解决就可以了，他不需要去管IE啊，啊火狐啊这种东西对吧？啊虽然说叉五超的是。谷歌的啊，虽然说不是自己研发的，可是微信他有自己的生态圈啊，懂吗？他不需要管理其他的，我就在我微信内部跑，是不是在国内谁没有微信是不是啊，这是我们说连阿里都没有办法什么撼动的社交体系吧，是不是啊，就腾讯是一个帝国啊，现在是不是啊啊，腾讯的市值已经什么超过阿里了吧？

是吧，腾讯已经是马化腾身价不是已经三千三千多亿了吗？是吧，阿里不是才将近3000吗？2900多嘛，好像是，是吧，OK，不是说马化腾的身价已经是马云加。刘强东的总额了吗？能理解吗？说腾讯其实是极其能赚钱的一家公司啊，OK，好。