最基础的弹性盒子的应用

最基础的弹性盒子的应用

记录一下弹性盒子最最最最最基础的应用

官方概念（搬运）

说明

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

取值

none： none关键字的计算值为: 0 0 auto
<’ flex-grow ‘>： 用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。在「flex」属性中该值如果被省略则默认为「1」
<’ flex-shrink ‘>： 用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。在收缩的时候收缩比率会以伸缩基准值加权在「flex」属性中，该值如果被省略则默认为「1」
<’ flex-basis ‘>： 用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。在「flex」属性中该值如果被省略则默认为「0%」在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <’ width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

简单用法

弹性盒子的无脑流用法
即在父框加上display：flex；表示这个盒子变成了一个弹性盒子，其子内容为弹性项，用flex：0 0 0；启动，这三个0是三个值，等下会细说，最最无脑的是后两个都写成0，第一个写比例，有手就行。

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
    </div>

.dad {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
        }
        
        .son1 {
            flex: 1 0 0;
            background-color: red;
            color: white;
        }
        
        .son2 {
            flex: 1 0 0;
            background-color: blue;
            color: white;
        }

可以看到两个崽子flex的取值后两个为0后，第一个都为1，就是老父亲的家产两个崽子一人一半。

自己的想法

关于父框变成弹性盒子后，子元素的变化：最明显的就是子元素的宽度变成了由内容决定，而高度则撑满了父框。

还是上面的代码，但是我两个崽子的flex：1 0 0；属性注释掉了以后，在横向上，两个崽子就只能自己有多少货，才能分到多少东西，但是在纵深上，两个崽子却一下到底，全都占满。大概就是，老父亲把自己的遗产以技术分成了多份，只要小崽子懂得一内内皮毛就可以得到这部分技术的全部财产，但是老父亲不会的技术，你会了也没用，应为老父亲没有。而且一项技术的财产只能由一个人领。
以及display：flex；的两个默认属性，。

第一个为横向排列，第二个为不换行。
关于取值flex抛开none不谈，flex是有三个参数的。我们一个一个来。
第一个参数：
flex-grow ：就是字面意思，用来指定剩余空间的扩展比例。注意，只是扩展比例，扩展，意思就是，当你的初始宽度没有讲父框占满的时候，父框还剩下了的空间，讲按照这个比例来分配。0就是我都不要，都是你们的，算法是 各自的值 / 值的总和，就是各自所占剩余空间的比例。不会的话，建议给小学数学老师打电话，说对不起（无雾）。
第二个参数：
flex-shrink：这个参数就有点麻烦了，并不是他的概念麻烦，而是算法麻烦，这个参数的含义是收缩超出的空间，意思就是你的初始值超出了父框的范围，收缩回来，就是小崽子们所学的东西已经超过了老父亲，但是老父亲并不认，还要把你拉回来，打的你忘掉。炸一看概念似乎和第一个值并没有什么不同，只是最后多了一句不明所以的话，但是坏就坏在最后一句话上：在收缩的时候收缩比率会以伸缩基准值加权在「flex」属性中。这句话我也没想好怎么结束，就是直接举（抄）个栗子，说说怎么算吧。
比如，子元素有三个：flex属性分别为：
flex：1 1 300px；
flex：2 2 200px；
flex：3 3 400px；
而父框的宽度是800px，所以，子元素的的初始值（不知道哪个的先看第三个参数），共900px；超出了老父亲100px；所以老父亲就要吧他们拉回来，但是老父亲是个技术人士，他是这么拉的：
崽1：(300*1/1900)100 约等于16px
崽2：(2002/1900)100约等于21px
崽3：(4003/1900)*100约等于63px
三个崽格拉回来这么多，emmmm，怎么说那，nb，没话说。
第三个参数：
flex-basis：这个简单的多了，就是你给各个子元素设置的初始值，意思是在发生弹性关系之前，小崽子们已经有的东西。而根据初始值的总和与父框宽度的大小，决定试用第一个参数还是第二个参数，如果父框大于总和，则根据第一个参数的之进行扩展，反之，就根据第二个参数的值进行收缩。
px：也可以讲第一个和第二个参数设置为0，只给出初始值，就可以对某个子元素进行定宽处理。还有一件事，如果子项启动了flex： 那么，width属性就不起作用了，初始值也不会看他，他就已经废了。

写在最后的话

虽然很可能这篇博客的访问量都是我一个人创造的，但是姑且还是说一下，如果你看到了了这篇博客，并且看到了这里，并且和我一样也是一个正在学习前端的萌新的话，在实际应用这些东西之前，请按照自己的理解实验一下效果，实际看看这些东西到底是什么，如果我有什么写的不对的，也欢迎回来喷我，放开喷，没事，但是要带着干货。结束。