弹性盒子进阶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。。。等我研究研究。