flex布局2
上一章节，整理出了flex布局的一些知识（点击这里），这一章节，来说说 flex-basis 这个属性
这个属性的取值。存在几种不同的情况
-
auto-
首先检查项目的尺寸，如果设置了width，那么这个值就为这个项目的宽度，就像上一个章节的例子一样
- 如果这个项目没有设置宽度，是有内容撑开的，那么这个值就是撑开之后的大小。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0px; margin:0px; } .box{ width: 800px; border: 4px solid #ccc; display: flex; } .box div{ height: 100px; } .item1{ background: red; } .item2{ background: blue; } .item3{ background: yellow; } .item4{ background: orange; } </style> </head> <body> <div class="box"> <div class="item1">1111111111111111111</div> <div class="item2">22</div> <div class="item3">33</div> <div class="item4">44</div> </div> </body> </html>
-
-
百分比
-
根据包含项目的容器的尺寸计算。如果父容器没有设置尺寸，是有子元素将内容撑开的。那么结果和auto一样，是由内容动态的撑开的。
-
举个百分比的例子，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0px; margin:0px; } .box{ width: 800px; border: 4px solid #ccc; display: flex; } .box div{ height: 100px; } .item1{ background: red; flex-basis: 10%; } .item2{ background: blue; flex-basis: 10%; } .item3{ background: yellow; flex-basis: 40%; } .item4{ background: orange; flex-basis: 40% } </style> </head> <body> <div class="box"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> <div class="item4"></div> </div> </body> </html>
可以看出来这个是等分的，按照相应的比例。
最后，还有一个flex属性，
flex 是 flex-grow、flex-shrink、flex-basis的缩写。
这个属性的默认值是 就是这三个属性默认值的组合，也就是 0 （即使有多余空间也不放大），1 （当浏览器窗口缩小的时候等比例缩小） auto (项目的自身大小)
当然，这个属性还有别的取值‘
flex flex-grow flex-shrink flex-basis
none 0 0 auto
auto 1 1 auto
n n 1 0% 这个n表示任意的正整数，如1，2，3。。。。n
(n)% 1 1 (n)% 这个n表示任意的正整数，如1，2，。。。。。。n
n (px) 1 1 n(px) 这个n表示任意的正整数，如1，2，。。。。。。n
n1,n2 n1 n2 0% 这个n1,n2表示任意的正整数，如1，。。。。。。。n
n1,n2% n1 1 n2% 这个n1,n2表示任意的正整数，如1，2。。。。n
解释一下，也就是
当 flex 取值为 none，则等同于0 0 auto
.item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
当 flex 取值为 auto，则等同于1 1 auto
.item {flex: auto;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
当 flex 取值为一个正整数，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
当 flex 取值为一个像素值或百分比的时候，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1,需要注意的是0%不是数字，而是百分比
.item{flex: 0%;}
.item{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item{flex: 20px;} .item{ flex-grow: 1; flex-shrink: 1; flex-basis: 20px; }
当 flex 取值为两个正整数，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%
.item {flex: 1 2}
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}
当 flex 取值为一个正整数和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1
.item {flex: 2 20px;}
.item {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 20px;
}
总结来说，就是
当设置像1，2，3这样的倍数的时候，表示放大的倍数，如果存在两个这样子的数，则一个是放大的倍数，一个是缩小的倍数，
如果设置了长度或者百分比，这表示 flex-basis的值
如果没有设置多余的信息，则 flex-grow: 1；flex-shrink: 1; flex-basis:0%
来看一个具体的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .box { width: 800px; border: 4px solid #ccc; display: flex; } .box div { height: 100px; } .item1 { background: red; width: 100px; flex: 2 1 0%; } .item2 { background: blue; width: 200px; flex: 1 1 auto; } .item3 { background: yellow; width: 300px; flex: 2 1 200px; } .item4 { background: orange; flex: 1 1 20%; } </style> </head> <body> <div class="box"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> <div class="item4"></div> </div> </body> </html>
这四个的宽带分别为80 240 280 200
具体的计算方法也和上一章节的一样
第一步，计算出每个项目占据的 flex-basis
.item1 {
background: red;
width: 100px;
flex: 2 1 0%;
}
项目1的 flex-basis 为 0% ,注意，这里不是 width 的取值。一旦取值为 flex-basis ：0% ，则表示在分配多余的空间之前。该项目已经不占据空间了，他的width已经失效了
.item2 { background: blue; width: 200px; flex: 1 1 auto; }
项目2的flex-basis为auto,这里就是取值为width .为200px;
.item3 { background: yellow; width: 300px; flex: 2 1 200px;宽度width失效 }
项目3的flex-basis为200px
.item4 {
background: orange;
flex: 1 1 20%;
}
项目4的取值为20%,相对于容器的800px，这里就是160px
最后的剩余值=800-0-200-200-160=240
然后按照放大的比例去分配空间，
各占据的分别是2：1：2：1，分配到的大小为 80：40：80：40
最后的宽度为 80： 40+200 ： 200+80 ： 160+40 = 80： 240： 280： 200
总结
当计算每个元素的具体的宽度的时候，最重要的是 flex-basis的取值，这个至可能会覆盖掉原来的width的值，然后根据放大比例，按比例分配剩余的空间，再进行求和的操作
