Web响应式布局项目实战 17.伸缩盒弹性布局原理和应用 学习猿地原创

好，那我们继续来上课，那么这节课呢，我们再来看一下我们的这个伸缩核布局的原理及应用啊好了，那我们先来了解一下我们的伸缩核模型叫做FA box啊，那么深核模型也叫做什么弹性和模型，或者是叫fix box啊，它是决定一个盒子在其他盒子中的分布，其实咱们之前也说过，我们在布局页面的时候，其实就相当于什么在垒砖头一样，对不对？比如说啊，在这里边，比如说我们要盖个房子，其实布局页面就跟盖房子一样，那盖房子是不是由各种各样的这么砖头来。垒到一块儿。对吧，垒到一块儿以后，那么我们给它盖个肥。给他盖一个。房价对吧，这是不是就相当于一个房子的形成啊。对不对，哎，那现在也一样，我们在布局页面的时候，其实也是这样的，那么只是需要我们干嘛呢？考虑什么，考虑我们这个盒子是怎么摆放啊，就是这么样的一个情况，那么咱们这里面呢。

这个弹性盒主要就是干嘛呢？就是决定这个盒子在其他盒子中的分布，以及如何处理可用的这个空间，其实在我们之前去布局的时候，比如说在我们之前做的这个项目里边啊。嗯。我来访问一下，叫做E。EEE。WMSOK。乳晕花了吗？好嘞。啊，路径被我换掉了。好吧，通过local找到来local或者1W。S。叫做ED。U。下边的我通过一这个地址来找啊。If you work come。

哎，怎么给我跳走了来。换一个。E Du e Du。哎，上我们这个。远程在哪吧，看哪个能防着。我再来一个网可能慢，哎，这样也行了。好吧，咱们来看啊，我说的什么意思，就是我们在这里面去布局，就是之前我们用的什么，用的是这个div加CS布局对吧？哎，通过浮动来布局，那么在浮动来布局的时候，我们经常会很尴尬的一些问题什么呢？比如说这一块的这个div对吧，从这到这这么大。对吧，我很难把这这里面是不是有三个，这是一个对吧？这是一个，这是一个，我很难把这三个这个位置平均分配，对吧？包括后面这块会多有一些多余的空间，中间也会有一些空间，这也会空间，前面可能也会有些空间，对吧？那么我一旦把空这些空间都用这个Mar顶或者是拍顶做好以后，那么后面往往会干嘛，会移出一部分空间，或者是什么，或者是溢出，对吧？那么如果移出我们会相当干嘛？把这些盒子进行减小，之前我们是不是都是这么操作呀？啊要么就干嘛呢？我们把这个宽高定义好，定义好之后呢，我们来设计来算好这个宽度，每一个元素的宽度，以及它这个M径中间的这个马径值，这样的话才能保证元这些元素是平等分配的。

对不对，哎，这就是这个使用这个叫什么。呃，浮动啊，布局的一个弊端，那么当使用深热核以后，它可以干嘛？它可以合理的去处处理这个可可用的空间啊，那么使用该模型呢，可以创建轻这个轻松的创建自适性的浏览器窗口啊，浏览器窗口的流动布局啊，那么非呃非box呢，是一个很新的东西，在W3C里面呢，它是希望可以使用什么，使用这个来实现一些更复杂的布局和应用啊。那么传统的合模型是基于HTML文档流排列的，就好比我们这个浮动啊，就是基于诶这边文档流排列的，那么使用弹性和模型呢，可以规定特定的顺序，要开启弹性和模型，我们就需要去设置这个属性啊，因为它的CSS3中新为它新添加的这个属性值，那么咱们目的呢，就是在浏览器窗口变化时，盒子会相应的改变它的大小啊，这就是我们使用这个伸缩核模型的目的，当然它伸缩核弹性核对吧，那浏览器放大，当它的这个宽度大的时候，它的这个盒子里边的子元素也会跟着变大，那么缩小的时候呢，它也会跟着变小，但大家记住。

在设置这个弹性和以后，这些属性将失效啊，这些属性将不起作用了。好，那么再往下来看，看一下咱们这个f bos呃，F bos的基础知识啊，由于这个呢，是一个整体的模块，他们之中有一些属性是属于负容器的，一些属性是属于子容器的，所以这个我们一定要区分好啊，一定要区分好，那么正常一个结构长这个样子对吧？那么我们先不看它，我直接来给他写，那么也这里边也说了，你看首先规定哪个是负容器，也就我们必须要定一个负容器，对吧？然后负容器中可以包含什么，包含多个项目，多个项目什么就是这个子容器看到了吗？而且呢，项目是可以在负容器中弹性布局的，那么你看布局这种横向的用相中合就会很容易啊，咱们来看我在这里边新建一个页面。

叫做A文件，比如说叫做呃。Fi。伸缩核对吧，那这里边我们来讲的是伸缩和布局，好了，那咱们来看啊，伸缩波布局，伸缩核布局，它是相当于轴线布局，就是对这么一个水平，这一个水平线进行这么一个布局啊，比如说在这里面selection。好，我最有个select，我给它起个名叫什么？叫做一，然后在这里会含个select，如里有个1234，然后给它加上编号二三，然后接下来我们来设置它，咱们先看啊，我先把它的这个大小Secs select错了，加上style标签stylele。好。然后这里边。E selection。给他一个WDT就宽度，比如说宽度给他多少呢？嗯。不给宽了，我直接给个包吧，包ER1像素实现的红色啊，或者是给他这个蓝色吧，好了，先看一下页面的效果是什么样的啊，先看下页面效果，来这里边我们点进去。

来，你看现在是不是这样的一个效果，那么接下来我可以干嘛呢？我可以把它设置成伸缩核，把谁呢？注意谁是负类啊，这是不是它是负类，它这里面包含了什么三个子类，那OK，它就是我们的外层容器啊，最外层容器也就是负类，那么怎么来设置井号Bo之一，我通过play这个组件给它设置Fi好了，这个时候那么它就是伸缩核了，那么一旦给它设置它属性以后，你看它三个子类啊什么样走你。你看三个子类是不是立马干嘛呀。并排开来了对吧，哎，都排在一个一条横线上了，而且根据它的内容大小干嘛进行缩放吧，那么一样我也可以继续设置，这个就不要了啊来你看好了，比如说我们给它这个子类设置一下啊box，比如说给它一些宽度啊，宽度为少呢，比如说宽度为嗯。这个这个这个200吧。

啊，高度呢，我们也给他200啊，但是谁呢，是它下面的子类，也就它下面的ec t好了，那现在咱们来看周NY。你看宽高是不是都有了，哎，那么这里边我们可以进行什么设置盒子，每一个盒子的摆放啊，它默认什么，默认是水平摆放，当然我们再去给它设置这个伸缩盒的，当然它成伸缩盒以后，它也是什么也是块状标签，看到了吗？也相当于是块状的伸缩盒，我能不能设成行内的伸缩盒呢？也可以，这里边我们通过play给它设置什么赖。好这好，那现在我们来看。你看这个时候它是不是就不占不读在一行了，你看是不是根据它子类压柱的大小，就是它的大小看到了吗？哎，所以当我们去需要的时候，我们看我们到底是设置这种块状的分深重核还是主编块状机行内的深重和就可以了啊好了反回来，那么反回来以后，接下来咱们来看在这里边。他说什么，我们可以再去设置子类的这些属性，那我们先不管它啊，一会儿呢，我们再来讲子类，我们现在只看父类里面都能放哪些属性，第一个父类里面可以放到这个，对吧？它是干嘛呢？定义这个这的容器，那么它是设置负元素的一个弹性核，那么元素会干嘛？会自动水平排列，看到了吧，那么能不能让元素垂直排列呢？也可以啊，也可以让元素垂直排列，那么我们需要去设置它的这个。

属性啊，不是这个属性诶。这呢？哎，不是。这里边没有记它的这个属性，OK，这里面没有记啊，没有记的话我们自己来写好吧，咱们来看啊，当前它默认情况下是不是横向排列的对吗？那么现在我想让它干嘛呢？我想让它变成这个垂直排列。不是，这个属性叫做C。G。T。F。好。Ex杠这个啊，给它设置一个肉。

行对吗？那现在你看注意啊，这也是负类容器对吧，叫做什么设置。设置这个子类盒子排列方向对吧，是横向，就横轴应该说排列方向应该是什么主轴。主轴啊，设置它的主轴和子的主轴，那么主轴会分为什么？分为什么横轴，你是横轴排列的还是什么，还是纵轴排列的。纵着排列好了，那现在咱们来看啊，我当天给他设置了一个什么，设置了一个肉要刷新，你看有变化吗？没有吧，也就是说他默认情况下是不是就横向的，哎，那也就是说这里边。叫做默认，默认什么呀，默认这个伸缩盒，伸缩盒。是乙。同轴为主对吧，横向。

排列，那OK，我能不能给它设置纵向的也可以在这里边，我通过还是它的属性flex-son，然后给它设置什么C。好了，这回再来看刷新，你看当我刷新以后，这回123是不是就纵向排列了？哎，那么一样，我当时设置的这个，如果我设的是in-fix的话，那你看它刷新。是不是变小了，哎，所以我可以设什么，可以设置主轴，也可以设置横轴啊，就看它是沿以哪个为主进行什么进行排列啊，好了，这个我不要我给它去掉了啊。好了。再来刷新，刷新完以后，接下来我们再来说，那么咱们说了，我们要。对这里边的子元素要进行设置，对吧，那么不会让他去占用这么多空间，包括这里边又还有浪费了这么多空间，对不对，会把这个空间可以合理的利用，比如说我们先让它沿着这个横向进行什么呢？进行一个居中，那么怎么来设置呢？使用这个just content，然后让他干嘛呢？让他center，让他center以后这个时候咱们看来。

你看我所有元素是不是在这里面自动水平居中了。看到了吗？在自动水平居中了啊。好了，那我能让他水平居中，我也能让他干嘛？我也让他居。第一叫做N啊，不是居底叫做居右啊，居右。哎，没有这个，嗯，叫做。Fix。走你你看这时候是不是居右了那么一样，那默认情况下是什么？默认是不是该向左侧，左侧的话那就是star呗，贝star来刷新，你看是不是居住对吧？哎，这都是调整，在什么调整它的水平方向，看懂了吗？那好，那注意这个时候因为什么，因为我们当前这个主轴是以什么，是以这个横轴为主的，对不对，哎，默认是以横，那如果我要是以纵轴呢，来Co。Lun，如果我以纵轴为主，现在我们再来看啊，好了，现在是这样的，如果这个时候我给他设置这个s content等于等于什么呢？等于center吧，来等于center，你看它。总理。有变化吗？

就没有变化，为什么？因为当前负元素它就是这么高，子元素也是这么高，对吧，咱们来看一下啊，子元素我给设置宽度是不是200啊好，我把负元素的高度也设置一下，比如负元素三个是200，那它就800吧。好了，现在你来看刷新。你看好了，这个时候它是不是居中的。看不看到，哎，也就是说一旦我把它的这个主轴给它变化了，变成什么，变成以列，就是以纵轴为主轴的情况下，那么我再给它均匀居中的时候，它是什么，是不就以纵轴来居中啊啊所以大家记住它不是水平方向的啊，它不是水平，它是根据什么，根据我伸轴和到底是通通过主轴来做什么做这个排列的，还是通过纵轴来做排列，如果是这个横轴来做排列的，那OK，它就是水平方向，如果是纵轴的，它就是垂直方向的居中。好，所以这里面大家要注意。要注意的是，如果伸缩和以以什么以横轴。为主轴对吧，那么该属性。

那么。该属性，该属性表示什么呀？该属。属性表示以，不是表示水平排列方式对吧？那么如果伸缩和以这个纵轴。纵轴为主轴。那么该属性表示什么呀？表示的是什么呀？叫做垂直的排列方式。排列方式好了，那我能左对吧，能这个居中，能居左也能居底吧，那就是flex这个杠N，你看这个时候我的这个纵轴的是不是下来了，哎，那么氦可以干嘛呢？我不光有这几个属性啊，还有什么属性呢？我还可以设置让它两边对齐啊，叫space-between两边对齐，中间留有位置，现在咱们看啊，我的主轴是纵轴对不对，那OK刷新。

你看纵轴的一跟三是不是两边对齐，中间留有空白啊，对不对，哎，那OK，我把这个。转换轴这个给它去掉对吧，那这个时候它是不是就默认是横轴，默认横轴，你看我再刷新是不是两边对齐，那两边靠边，然后中间留有空白啊，那么能这么设置，还能怎么设置呢？我还可以再设置一个，比如说。这里边叫做gus。Content，然后给它设置什么呢？设置这个space等于around啊space等于around，那现在你来看我再来刷新，你看什么呀，是不是两边都会留有相应的相等的空白对不对，然后中间也会每一个元素之间也会留有空白吧，哎，所以这几个属性啊，我们会经常用的，大家一定要记住，而且整个这里面是不是都是记录在哪记录到我的这个副元素中的，哎，这都是负元素的中的属性啊，叫做两边留有空白不对不对不对，叫做两边顶头对吧中顶头中间。

顶头中间留有空白，这是什么呀？这是这个SP杠，Bet we这个属性那么一样，这个两头。及中间都留有空白，那就SP杠怎么样杠这个呃a RO around，然后这个呃杠呢，那就是结束。结束。位置为什么不能说这个？为什么不能说去左侧或者右侧，因为如果是水平，你说左侧和右侧没问题对吧？那么如果一旦我把它的主轴变成纵轴了，那么这个时候你还能还是水平了吗？这就不是了，这不就垂直了对不对？所以应该是从开始位置和结束位置啊，这就是这两个属性啊，那OK，那这个完事以后我们再往下来看。

还有什么呢？我们现在光排列它是没有问题了，对不对，现在比如说。我把它，呃，这个啊。诶，代码咱们看，我把它再注射掉，现在我不需要让它干嘛，既不需要让它排列了，然后这个也给它注释掉，也不需要你设置轴了，默认还是以横轴为主，看到了吧，还是以横轴为主，但大家知道我这个div现在是不这个外层的这个元素是不是这么大呀，哎，那么一样，比如说这个我还开起来吧，不影响啊，我要看它。居中对吧，它相当于相当于不是在这里边也相当于摆放好居中了嘛，那么接下来我可以干嘛呢？我可以通过另外一个让它垂直也居中，叫做。Itit文杠it给的设置什么呢？我可以让它限制干嘛？以底部开始啊，你看来刷新是不是算上底部来了对吧？然后包括我还可以干嘛呢？我绕着s stat。是不是从开始的位置，哎，这是设置它垂直的方向了，对不对，哎，就是如果它是横轴的话，注意它以横轴为主的话，它设置的是垂直对不对，然后再来还有什么呢？比如我让它居中行不行c center。

周影，你看当学元素是不是在这里面举动了，看到了吧？哎，那OK，那这是以横轴为准，那如果我以纵轴为准呢？来。再来，抓紧走你。你看我以纵轴为准，它是不是在这个水平方向进行居中的，对不对，哎，那么一样，我说我让它这个居底，就是说到底部对吧，到结束的位置，那这个时候再来刷新，你看它是不是到右侧。看到了吧，哎，所以我们可以通过这两个属性去摆放我们的这个什么，摆放我们的这个盒子，好了，那现在来给它刷刷新啊，它缩小了，我让它还原了啊，这是正常默认的情况下，对吧，那么咱说了伸缩核，伸缩核它肯定是可以伸缩的，对不对，而且它会根据咱说了根据什么呀，根据这个页面大小来决定它的大小，你看好了，我现在往里面说。

说你看我再说你看我越说它的负类是不是就越小啊，看到了吗？哎，现在没影响到子类呢，我再往里面说，再往里面说你看。有没有影响到子类，子类能不能小子类现在什么空白都没有了，对吧？然后再说再说，现在浏览器我已经缩到最小了，我说不动了啊，浏览器已经缩到最小说不动了，看到了吗？哎，也就是说它会根据什么，根据我们浏览器的这个大小来决定什么，决定子类的空间及大小，看明白了吗？哎，这就是咱们用伸缩核布局的一个好处啊，一个是索好处，好了，咱们继续往下看它的属性。那么现在注意它是用到负类里的对不对，然后。这样下来我们又用了一个它，它是干嘛的？你看设置或检索盒子元素在主轴看到了吗？主轴方向的对齐方式啊，默认情况下是不是以横轴为准的，那么它有这么几个值，看到了吗？一个是star默认值，项目位于容器的开头，然后位于容器的结尾，位于容器的中心，然后项目位于各行之间都会留有空白的容器内，对吧？这个是各行之间之前之后对吧？也就是这个顶头嘛，呃，顶头跟结尾啊，都有留有空白的容器，那这是。

一个还有什么，还有一个A棱方it这个属性定义什么定义这个指向在容器当前行的侧轴对吧，那侧轴默认情况下是不是就纵轴啊，对不对，这个在纵轴上的方向对齐的方式啊，这只是默认情况下对吧？那么它的默认值是什么？项目被拉伸以自适应，看到了吗？项目被拉伸的时候它会自适应，然后呢，中间呢叫center。然后这个fix呢，叫这个fix和纳一样，位于容器的开头，然后这个位于容器的结尾啊，其实对于深和布局，大家记住这几个布局的时候都已经够用了啊，都已经够用了，那现在这里边也有一样，这里边也是给了一个小例子，对吧，它设置了一个子类，是100乘100的，给了一个边框，看到了吗？然后负类是300乘300的，也给了一个边框，然后开始干嘛，给了设置伸和，你看face play是不是设伸出和，然后让它的这个什么呀，主轴。

是不是居中，然后现在是什么侧轴，是不是也让它居中。看到了吧，那最终我们是不是做出这么一个像回字块的这么一个东西了，哎，所以深入和在布局的时候是特别方便的啊，是特别方便的，好了，那你再往下来，下面还有什么说，呃，Feels放rap，它是让弹性和元素再必要的时候折行对吧，那么我先不管它，我们先把这个元素啊再多给一些，刚前我是三个来我再给三个。好了，现在你看刷新。不管怎么样啊，你看我往里面说。你看再说。再说看到了吧，它确实跟着我的这个大小在决定它的大小，对吧，那么咱们说了再让它在必要的时候折行，怎么样，在必要的时候折行了，咱们来看好了，我在这里边一样，我在它的负类里边，注意它也是负类的属性啊，Flex-wap，那默认情况下什么是novap是不需要换行的啊，你看这里面的默认no novap对吧？诶规定的项目灵活不折行或不折列啊，默认时候它是不换行的，因为咱们目目前默认情况下是不是以主轴为准呢？哎，所以它就叫做行，就以行为说话了啊好了，现在你看我刷新就是我们默认情况不换行，怎么你怎么说他都不会换行对不对？那么再来，如果我给他一个wab的wap。

Wap，现在你再看好了，我来返回来啊，返到最大。注意我刷新看好了，没有任何问题对吧？好往里面缩。再说。再说。再说。再说诶，咱们不是让他换行了吗？Warp，我打错了吗？哇，咱们看一下我有没有打错WP。W。哎呀，这脑袋基本是废了，好了，这回再来啊。欢迎回来。OK，来刷新一下，刷新完以后这个人我看我往里缩。换不换行看到了吧，是不是换到下一行，它俩也是自动什么居中的吧，然后与前面一空两格，与后面空两格，中间内容他自己去找了对吧，然后再往里面说，你看说到这以后再说的时候，是不是又掉下来一个，看到了吗？我再往里面缩，再往里面缩不是又掉下来了，你看我们其实这种情况下是不是就相当于什么，相当于我手机在布局的一样，在这个不是手机布局啊，叫什么叫做这个，呃，显示是布局一样，你看啊，当前可能我浏览器是这样的，对吧？那么我显示六条商品信息，那么如果我是移动端呢，移动端可能就就是这么样的，我是不是就只展示了两条商品信息。

看到了吗？你看我这样的话，直接是就把布局的样式就写出来了，哎，所以用这个深入和布局是不是比较方便呢。看了吧，这就它的好处啊，它可以根据什么，根据它固类的大小决定它子类的大小，但这子类我是不是设置了这个宽度固定的对吧，宽度和高度都等于它等于200啊，那么一样，我们这里边可以给他设置最大宽度和最小宽度这样的信息啊。好了，那再往下来看，那么这个属性我们了解了，那这里边有时说规定项目在灵活，这个究竟规定灵活的项目在必要的时候折行或者折裂，但是是以相反的顺序，什么叫相反的顺序啊。

123，我得把这个编号打对了才可以啊，456456 OK，现在啊，我们看它的顺序是什么样的啊，来刷新，你看123456对不对，那OK，我们给他一个相反的顺序叫做re。这个对吧，Web杠，Re SE OK，再来刷新，你看再来刷新的时候是不是654321，是不是倒叙过来了，哎，就是这个意思啊，就是这个意思。好了，然后再往下来还有什么，还有这个和这个他说什么应该呃，设置该属性为它的默认值啊，其实这两个没什么用啊，这两个一般我们不用，一般都没有，就是一个rapp啊，用的最多的就是rapb啊，或者是不设置，不设置默认值是不是就是no rapp了，哎，这两个属性基本上没用过啊，好了，那再往下来还有什么呢？还有这个子元素中不用的属性，子元素中其实就用这么一个，这个什么呢？就是设置这个子元素的占位，设置子元素占位的你看好了啊，现在比如说我把这子元素的大小啊框框给它去掉了，去掉以后呢来。

刷新。当前子元素是不是都这么大呀？哎，都是根据它内容的大小而去举证它大小的，对不对？那好了，那现在我来设置，比如说我告诉你select冒号first fire first control是不是指第一个selection，第一个selection我让他什么呢？B加的背景颜色变成yellow green，现在你来看它第一个变没变？变了吧，好，变了以后接下来干嘛呢？我再来通过这个属性来给它设置它的大小。叫F。F。L。不是割肉丸加ow，对了啊，加W好了，那么怎么给它设置呢？我说第一个让它占位一个大小，但一个大小是多大呢？不知道对吧，我刷新一下吧，诶看好了这一个大小是不是很大呀，为什么？因为后面的23456你都没有设置，所以它的一是最大的，看到了吗？但是好，如果我要给它设置呢，比如说在这里面再来一个。

V这里边叫做NTHNTH杠次的。Chl有的第二个我给的第二设置这个背景颜色叫红色啊，第二设置完了占位几块呢？完让占位两块，那不管两块多大，两块始终是不是要比一块大一倍吧，对不对，那现在你再来看啊刷新。你看我的这个二是不是比一要大，哎，包括我在拉伸也一样。它始终是它的两倍对不对，哎，那同样同样再往下来，再往下来，我的第三块CTRLC第三块，因为这些都是什么，都是相对的大小，对吧？哎，如果我要给它设置为三，那三肯定比二是不是还要大，那现在你再来看一也会对应的减小。你看一对应减小了二还是一的两倍，三是二的这个多一倍了，对吧，哎，达到了四才叫两倍嘛，那一样，那四的时候你看是不是。

比三再多一个一倍出来啊，这里边给他一个四。好了，颜色变换一下，比如说on这个，Orange这个呢。好，现在你来看。走，你。看到了吧，123A4呢。哦，不好意思，这块叫四啊，好，再来刷新。好了，你看一现在变得更小了，对吧，二也相对小了，但二再小是不是都是一的两倍，看到了吧？三是不是始终比一大，比这个二大一个这个一啊，对吧？四呢，是不是比三大一个一大一个一的这么宽，哎，其实大家可以量一下啊，你看是不是这样的，它会自动的帮我们来测算它的大小。来标识在里边。你看比如说这一天得多大一大概是100。113对吧，啊，就算大概一百一左右吧，那你再看二。

二是吧，214好了，是不是相当于两倍啊，我量的也不够准确啊，我没有精确到那个那么准确，因为这咱这里还带边框呢，那三呢，是不是就300多了。看到了吗？哎，316那四呢。四百二看到了吧，哎，这里边是不是逐渐在扩大，逐渐的扩大了，哎，那OK，再来那一样，我五跟六能不能设置，都能干嘛都能进行给它设置啊，设置它占位的大小，我直接一起设置了，比如说五。然后六啊五六，那么这里边五的话，我给它设置五，那颜色呢，比如说我们再来一个这个。金色对吧，然后六呢，我就给它设置单位六个，然后这个颜色呢，我给它再呃，再来一个，就这个颜色吧，听好了好了，现在你来看我来刷新。你看是不是每一个都要比一个大，一个比一个大，一个比一个大，哎，所以我可以干嘛通过这个东西来给它设置什么，设置子元素占位的大小，只有这个属性是在子元素中用的，看到了吗？哎，只有这个属性是在子元素中用的啊来，那我们把这块注释掉了啊。

整个这一块内容我们注释掉，如果都注释掉以后，现在我们再来看，回过来咱说了这个时候子元素是干嘛，是根据它内容大小而去结论它，不是根据内容大小去结论它大小的吧，哎。好。那么咱们再来，那现在知道了这个以后，那么我想问啊，比如说在这个selection，就是在第六个selection里面啊，我还有一个selection，比如说叫六。然后再来个selection，比如叫七，注意啊，这里面是不是多两个啊，那现在你再来看，我再来刷新，你看六七是不是这样的，我能不能让六七也横排横向排列呢？就是说把六七也给它设置生入和可不可以没有问题啊，注意这个虽然是它的子类对不对，那它能不能当成成当能不能当它的负累，能吧，哎，所以在这里边这是什么？这是select克ion的第六个selection对吧？那OK，我们先选中它啊，叫做井号BOS1里边selection冒号last杠是不是最后一个selection，哎，最后一个selection，咱们先给他个边框border移项数soli，我给他一个什么呢？I，不行，给他000吧，黑色。

刷新看好了，当前是不是有个黑色的边框，哎，当然这里边也有什么，也有蓝色的吧。呃，我都有点看不清了。太小了是吧。来点过来，点过来以后先看看它是不是有黑色的对吧？哎，把这个蓝色的给取消了，看到了吧？哎，蓝色取消了，你看是不是有黑色的，哎，那也就是说我设的是成功了，成功以后现在咱们来看我让他干嘛呢？Dis play也变成伸缩核对吧？注意它是针对于谁，是不是针对它这两个子类了，哎，针对于它这两个子类，那现在你再来看啊，我再来刷新，你看六跟七是不是也并排了。对吧，六跟七并排的那一样，现在他们两个是紧挨着的，对吧，那么这个时候我怎么调到位置呢？你看好了，我在这里边，比如说我想在居中给他一个啊，不错了啊，不是一个属性。

现在我们是主轴，那我是不是可以给它做水平方向的居中，对吧，然后这个。侧轴呢，杠I他们也是居中的，那现在你来看我来刷新，它有变化吗？有吧，没有吧，为什么没有变化，因为注意了，因为他的负类，它的负类谁他的负类是不是他呀。哎，就是这个家伙啊，这个家伙他根本就没有宽高对不对，所以你要想它子类能让在里边显示居中效果，那你要给它宽高啊，你要给它大小才行吧，因为它已经被什么，是不是已经被Y1层被BOX1，因为BOX1就是三角和已经被数据和所影响，所以它没有高对不对，它的宽高就是根据内容大小，那这个时候我给他定义好宽高以后，你看他这两个项目在里边。两个项目在里面是不是居中的，如果我不设置看好了这两个属性，如果我不设置的情况下啊刷新。是不是默认是这样的对不对，哎，独占独占这个这个这个这个这哎这就这一列吗？我的六七怎么并一起啊，并一起正常，因为我给他他了啊，不给他的话是不就这个横着来。

是不是独占一行啊，哎，那么一旦设置完三庄合以后。把这个设置完伸出合以后，这个让它居中对吧，这个让它居中，那么这个时候你看他们两个都居中了，看明白了吧？哎，这个是咱们这个伸缩盒的操作啊，那么主要用的就这么几个属性，就够我们用的了啊。好了，然后再往下来，这里边还有一个旧的central和啊，旧的深和，你看深和老版本的话，那么叫贝play，等于box就是这么设置的啊，然后呢，在以前不支持的时候呢，我们还需要干嘛呢？设置它web k啊，设置moz webk是不是就让它火狐跟sub支持这个Z是不是就让它这个啊不对，这是谷歌跟sub支持对吧？然后moz呢，就是来支持了。然后子元素呢，用什么用，然后包括这个过渡的版本就啊，还有这个最新版本，目前我们用的就是最新版本，直接是base play等于fairs就可以了啊，这就是咱们伸缩格中的所有内容啊好了，那这些东西大家一定要记住啊，下来以后自己要去整理笔记，每一个属性什么意思，每一个属性什么意思对吧？我说了，如果它是它的主轴，主轴要是横轴的话，它就是水平方向的操作，它就是垂直方向的操作，对不对，因为它是侧轴啊，它始终是设置主轴的位置啊，始终记住始终设置主轴位置，那么如果它的主轴要变成了纵轴的话，也就是以纵轴为主轴的话，那它就是设置什么纵轴的位置，对吧？而它是这个侧轴，侧轴就变成什么，就变成横轴的位置啊，所以大家一定要把这几个区分，另外在子位里边我们只会用一个叫什么呀，这当grow啊，可以设置子类的占位大小。

好，这就是咱们的伸缩盒。