弹性盒子进阶1

弹性盒子进阶1

上次说了弹性盒子的最最最最基础用法，这此写（抄）一点进阶的内容，主要是关于弹性盒子的主轴方向，以及一些有意思的应用。

主轴方向

主轴横向

主轴横向是弹性盒子的默认属性，就是字面意思，将其中的弹性项横着排。。。

<div class="row-dad">
        <div class="row-son1">大崽子</div>
        <div class="row-son2">二崽子</div>
        <div class="row-son3">小崽子</div>
    </div>

.row-dad {
            height: 50px;
            border: 1px solid black;
            display: flex;
        }
        
        .row-dad div {
            line-height: 40px;
            text-align: center;
        }
        
        .row-son1 {
            border: 5px solid red;
            flex: 1 1 100px;
        }
        
        .row-son2 {
            border: 5px solid blue;
            flex: 1 1 100px;
        }
        
        .row-son3 {
            border: 5px solid yellow;
            flex: 1 1 100px;
        }

简单粗暴，想要各个崽子占多宽，就自行调节三个属性值（主要是第一个和最后一个，中间那个。。。我怕我用不好，感觉也没有必要浪费那个脑细胞，（应该是我还没有遇到要用的情况吧））。
ps：默认的横向是从左到右的，row-reverse 属性值是从右到左的。

主轴纵向

主轴纵向，和横向的原理差不多，值得注意的是，横向时，设置的宽度当弹性项启动时会失效，高度默认是父框的高度。而纵向的话，设置宽度默认是父框的宽度，高度在弹性项启动时会失效。与横向时相反，也很容易理解，是吧。

<div class="col-dad">
        <div class="col-son1">大崽子</div>
        <div class="col-son2">二崽子</div>
        <div class="col-son3">小崽子</div>
    </div>

.col-dad {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            /* 主轴方向：纵向排列 */
            display: flex;
            flex-direction: column;
        }
        
        .col-son1 {
            border: 5px solid red;
            flex: 0 0 40px;
        }
        
        .col-son2 {
            border: 5px solid blue;
            width: 70%;
            margin: 10px auto;
            flex: 1 1 200px;
        }
        
        .col-son3 {
            border: 5px solid yellow;
            flex: 1 1 100px;
        }

这是最基础的关于主轴方向的练习，用起来很方便，也能套用在很多的东西上。
p是： flex-direction: column;是从上到下的，column-reverse 是从下到上的。

换行

关于弹性盒子的换行的用法。

横向的换行

<ul class="row-dad1">
        <li>崽1</li>
        <li>崽2</li>
        <li>崽3</li>
        <li>崽4</li>
        <li>崽5</li>
        <li>崽6</li>
        <li>崽7</li>
        <li>崽8</li>
    </ul>

ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        
        .row-dad1 {
            width: 280px;
            height: 160px;
            border: 1px solid black;
            display: flex;
            /* 子项溢出时换行 */
            flex-wrap: wrap;
        }
        
        .row-dad1>li {
            flex: 1 1 20%;
            border: 1px solid red;
        }

当我们进行换行应用的时候，就要稍微的算一下了，算初始值的设置，以上面的栗子为例，dad有8个崽，想要他们排列在两排，并且给予他们的爱都是一样的，那么，这个时候就我们可以将dad平均切成上下两份，崽1-崽4分上面的那份，崽5-崽8分下面的那份，或者竖着切成4分，然后嘿嘿嘿。。。当然，我们毕竟也不是什么魔鬼，做不到如此残忍，所以，我们可以在父框上加上flex-wrap:wrap:让溢出的子项自动换行。然后，我们只需要保证初始值设置时，一行只能放下4个崽子，放不下第五个，然后将扩展属性值设为一样的，就可以了。比如上面的栗子，讲道理，我将初始值设为了20%，那么在没有border: ; 的情况下，他应该是刚刚好放下5只小崽子的，但是我加了border，上面就放不下了，就差border所占用的那几px的空间也不行，所以，崽5就只好另起一行，在下面找另外三个小崽子玩，至于剩下的空间，当然是还是平分拉，毕竟扩展值都一样。

纵向换行

<ul class="col-dad1">
        <li>崽1</li>
        <li>崽2</li>
        <li>崽3</li>
    </ul>

.col-dad1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            /* 主轴方向：纵向 */
            flex-direction: column;
            /* 子项溢出时换行 */
            flex-wrap: wrap;
        }
        
        .col-dad1>li:nth-child(1) {
            flex: 1 1 90%;
            border: 5px solid red;
        }
        
        .col-dad1>li:nth-child(2),
        .col-dad1>li:nth-child(3) {
            flex: 1 1 40%;
            border: 5px solid blue;
        }

纵向这里和横向的差不多，个人感觉主要是初始值的设置，只要你设置的初始值，能够将要挤到下一行的东西挤出去，剩下的事情就可以交给扩展来完成。

最后

这次就先这样，后续会写一个关于对齐方式的东西，emmm。。。等我研究研究。