• css布局中的flex属性的使用
  • 发布于 2个月前
  • 173 热度
    1 评论
  • 李白羽
  • 19 粉丝 42 篇博客
  •   
面试官:请你列举一下实现二列布局的方式?
小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 的比例划分。

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 % ,还是第一个参数起作用。

注意点:
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为固定的宽度。
用户评论