面试官:请你列举一下实现二列布局的方式?
小Z:父div => display:flex 第一个子div 定宽,第二个flex:1
面试官:flex:1 是什么意思?里面有几个属性?属性值是什么?分别代表什么意思?
小Z:。。。
解答:
flex三个属性:
1.flex-grow => 放大
2.flex-shrink => 收缩
3.flex-basis => 缩放按照的标准
flex:1; => 1 1 0%
flex:2 => 2 1 0%
三个属性起作用的的条件
1.flex-grow触发的条件
当item的总宽度,小于wrap的宽度的时候。
页面结构:
如果第三属性值是 0%,按照 grow 的值来进行划分。
如果第三属性值是不是 0%,是具体值,那么整体的宽度将减去各个item累计的basic的值,剩下可支配的空间 按照grow 的比例划分。
2.flex-shrink触发条件
当item的总宽度,大于wrap的宽度的时候。
页面结构 :
按照 shrink 的值来进行缩放,第三属性值一定不能 0%,(主要是基于第三个参数进行缩放的 超过宽度=(累计宽度-父亲宽度的差值),按照缩放比例划分,然后 最后显示宽度 =(本身固有的宽度 - 超过宽度*划分比例)。
如果为0 % ,还是第一个参数起作用。
注意点:
1.对于flex的自动收缩/放大,实际是划分的是可支配的空间,可支配的空间,并不包括 padding 、border、margin(flex item 元素不存在margin 合并的现象)
2.设置了item 的flex,就不要设置元素本身的width,不然设置的width,不生效。
3.对于flex 的item,如果不设置item的flex 的值,设置item宽度的宽度,当wrap大于item 的累计和时,item 不会进行方法。但是,如果item累计和大于wrap,子item会根据宽度来进行收缩。
4.对于二栏布局,第一个item 固定宽度,第二个item设置flex:1 .其实这种做法并不安全,当第二个子元素的内容超出flex为1 划分的宽度时,第一个item 的宽度将会被挤掉。是因为flex的子元素设置max-width:auto;造成的原因。
常见的解决方法:
1设置item的overflow:hidden。
2.设置第一个item 的flex 的basis为固定的宽度。
小Z:父div => display:flex 第一个子div 定宽,第二个flex:1
面试官:flex:1 是什么意思?里面有几个属性?属性值是什么?分别代表什么意思?
小Z:。。。
解答:
flex三个属性:
1.flex-grow => 放大
2.flex-shrink => 收缩
3.flex-basis => 缩放按照的标准
flex:1; => 1 1 0%
flex:2 => 2 1 0%
三个属性起作用的的条件
1.flex-grow触发的条件
当item的总宽度,小于wrap的宽度的时候。
页面结构:
<div class="wrap">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
页面样式:
.wrap {
width: 400px;
display: flex;
border: 1px solid #000;
}
.item1 {
width: 100px;
height: 50px;
background: red;
flex: 1;
}
.item2 {
width: 100px;
height: 50px;
background: pink;
flex: 1;
}
.item3 {
width: 100px;
height: 50px;
background: green;
flex: 1;
}
放大计算原理:
如果第三属性值是 0%,按照 grow 的值来进行划分。
如果第三属性值是不是 0%,是具体值,那么整体的宽度将减去各个item累计的basic的值,剩下可支配的空间 按照grow 的比例划分。
![](http://www.mk2048.com/web_upload/blog_imgs/4/img-dalbll-com_PorkBelly_Article_Big_2136e7c1-3259-41dc-9c30-23d7b1f81a39.jpg)
2.flex-shrink触发条件
当item的总宽度,大于wrap的宽度的时候。
页面结构 :
<div class="wrap">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
样式:
.wrap {
width: 200px;
display: flex;
border: 1px solid #000;
}
.item1 {
height: 50px;
background: red;
flex: 0 2 100px;
}
.item2 {
height: 50px;
background: pink;
flex: 0 1 100px;
}
.item3 {
height: 50px;
background: green;
flex: 0 2 200px;
}
缩小计算规则:
按照 shrink 的值来进行缩放,第三属性值一定不能 0%,(主要是基于第三个参数进行缩放的 超过宽度=(累计宽度-父亲宽度的差值),按照缩放比例划分,然后 最后显示宽度 =(本身固有的宽度 - 超过宽度*划分比例)。
如果为0 % ,还是第一个参数起作用。
![](http://www.mk2048.com/web_upload/blog_imgs/4/img-dalbll-com_PorkBelly_Article_Big_3601f796-61c3-44c8-a8d1-95ac752c9e61.jpg)
注意点:
1.对于flex的自动收缩/放大,实际是划分的是可支配的空间,可支配的空间,并不包括 padding 、border、margin(flex item 元素不存在margin 合并的现象)
2.设置了item 的flex,就不要设置元素本身的width,不然设置的width,不生效。
3.对于flex 的item,如果不设置item的flex 的值,设置item宽度的宽度,当wrap大于item 的累计和时,item 不会进行方法。但是,如果item累计和大于wrap,子item会根据宽度来进行收缩。
4.对于二栏布局,第一个item 固定宽度,第二个item设置flex:1 .其实这种做法并不安全,当第二个子元素的内容超出flex为1 划分的宽度时,第一个item 的宽度将会被挤掉。是因为flex的子元素设置max-width:auto;造成的原因。
常见的解决方法:
1设置item的overflow:hidden。
2.设置第一个item 的flex 的basis为固定的宽度。