JS基础 | 弹性盒子进阶(一)

发布于 2021-1-7 10:49
浏览
0收藏

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

主轴方向

  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;
        }

JS基础 | 弹性盒子进阶(一)-开源基础软件社区简单粗暴,想要各个崽子占多宽,就自行调节三个属性值(主要是第一个和最后一个,中间那个。。。我怕我用不好,感觉也没有必要浪费那个脑细胞,(应该是我还没有遇到要用的情况吧))。
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;
        }

JS基础 | 弹性盒子进阶(一)-开源基础软件社区当我们进行换行应用的时候,就要稍微的算一下了,算初始值的设置,以上面的栗子为例,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;
        }

JS基础 | 弹性盒子进阶(一)-开源基础软件社区纵向这里和横向的差不多,个人感觉主要是初始值的设置,只要你设置的初始值,能够将要挤到下一行的东西挤出去,剩下的事情就可以交给扩展来完成。

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

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

收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐