css知识：flex 、bfc

1.flex

       flex是css3新出来的布局方式，是非常厉害常用的东西。

       详情可查询www.runoob.com/w3cnote/fle…

2.flex易错点：

       2.1 flex-grow （扩大）

 <div class="main">          
     <div class="item1">11</div>          
     <div class="item2">22</div>          
     <div class="item3">33</div>  </div>
<style>            
.main{
    width:500px;
    height: 200px;
    display: flex;
}            
.item1{
     width:100px;                
     flex-grow: 1;                
     background: #f00;            
}            
.item2{
     width:100px;                
     background: #f60;           
 }            
.item3{               
    width:150px;                
    background: #ff0            
} 
</style>复制代码

  页面ui为:

我们发现：

   item1元素占据了除了item2和item3所有的位置。

为什么会出现这样的情况？

    那我们需要从"剩余空间"这个词说起。

    什么是剩余空间呢？具备flex环境的父容器，通常是有一条主轴和一条侧轴，默认情况下主轴就是水平从左向右的，侧轴是垂直从上到下的（类似书写模式）。 剩余空间就是父容器在主轴的方向上还有多少可用的空间。

     main是父容器，item1、item2、item3就是子元素，那么

剩余空间 = main元素宽度 - item1宽度 - item2宽度 - item3宽度 = 150px;（上述代码计算）

flex-grow其实就是参与剩余空间的宽度，默认为0，说明元素默认都不会参与使用剩余空间。

1. 此例中，只有item1设置了flex-grow：1，也就是说剩余空间1等分，全部给了item1，所以item1的实际宽度为:250px;
   
2. 如果此例中，item2也设置了flex-grow:2，则说明剩余空间已经3等分了，(item1和item2都设置了flex-grow)，所以item1宽度 = 100 + 150 / 3 *1 = 150px; item2宽度 = 100 + 150 /3 * 2 = 200px;

    2.2 flex-basis

     这个属性值的作用也就是width的替代品。 如果子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器。 如果同时设置flex-basis和width，那么width属性会被覆盖，也就是说flex-basis的优先级比width高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。

   2.3 flex-shrink （缩小）

    注意一句话: 如果剩余空间为正数，则说明子项目宽度之和小于 父元素项目宽度，也就不存在flex-shrink

    当子项目不存在换行，且子项目宽度之和 大于 父元素项目宽度，为了完整的显示子元素，肯定会子项目进行缩小处理，那这个缩小规则是什么呢？

     flex-shrink：默认为1，也就说如果子项目宽度之和 大于 父元素项目宽度，那么所有的子元素都缩小相同的宽度。

 <div class="main">          
    <div class="item1">11</div>          
    <div class="item2">22</div>          
    <div class="item3">33</div>  
</div>

<style>            
.main{               
    width:500px;                
    height: 200px;               
    display: flex;            
}            
.item1{
    width:200px;                
    background: #f00;            
}            
.item2{                
     width:300px;                
     background: #f60;
     flex-shrink:2            
}            
.item3{                
    width:150px;                
    background: #ff0            
}
 </style>复制代码

     如果此例中，item2的flex-shrink：2，如果默认的压缩率是x，则item2的压缩率为2x

     则 500 = 200 *（ 1-x） + 300 *( 1-2x) +150*(1-x) 可以计算出每个子元素各占的宽度。

     如果flex-shrink:0;则说明这个容器在任何时候都不被压缩

    也就是说:必须子元素合盒子宽度之和 大于 父元素，该属性才会生效。

        2.3 flex

          flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

总结：

1、剩余空间＝父容器空间－子容器1.flex-basis/width - 子容器2.flex-basis/width - …
2、如果父容器空间不够，就走压缩flex-shrink，否则走扩张flex-grow；
3、如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0；
4、如果子容器的的flex-basis设置为0(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将不会为子容器预留空间。
5、如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。

2.BFC

2.1 知识准备(对以往知识的重新理解)

• float到底因为什么出现？ 

        在pc时代所谓的浮动布局，其实是已经被滥用了，甚至出了一系列的‘bug’，所谓的高度塌陷等等。其实float出现的原因：为了实现文字环绕效果！！！

• float有那些特性？

          float存在的特性：

          1.   脱离文档流

          2.  块状该元素（一个内联元素，设置了float，则相当于为该内联元素设置了 display:block）

          3.  没有margin重叠

          4.   包裹性

假设浮动元素父元素宽度 200px，浮动元素子元素是一个 128px 宽度的图片， 则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度 128px      

• margin重叠问题？

          1.相邻兄弟元素之间的margin重叠。(发生在块级元素，且只在垂直方向，并非某些博客写的仅仅在bfc里出现，记住这是公用的规则)

          2.父元素和第一个子元素和最后一个子元素的的重叠问题(也是在垂直方向)

• float脱离文档流? 和absolute的区别？

          我记的当初学习float absolute这些css属性时，说到他们会脱离文档流

// 看下面代码(来自css世界-张鑫旭)						<div class="father">

   <img src="me.jpg">

   <p class="animal">小猫1，小猫2，...</p>

</div>img { float: left; }它的效果是一个：文字环绕图片的效果。
// 明明当初学的时候说到： float元素会脱离文档流，那应该p内容会从最左边开始展示，那为什么是在img右边
呢？
// 其实还有一个概念：部分无视和完全无视
部分无视：(以上面代码为例) 虽然img元素脱离了文档流，p会无视img(我们发现，p的width确实是屏幕宽度)，
但是p内部的文本会为img让出位置(所有的float元素都有这个问题)
完全无视：比如absolute元素，其他元素会完全无视

*** 这因为“部分无视”的缘故，才能有“文字环绕效果” ***复制代码

• 提醒

       bfc这个东西，不要看博客！看书即可，（张鑫旭大佬的《css世界》）！

       因为博客里写的繁杂且乱，对于我们一般开发而言，仅仅知道bfc能干什么？能解决我们什么问题即可。

       因为css的世界真的是繁杂且浩瀚，需要大量的时间去阅读相关的知识。

2.2 BFC核心

         概念：块级格式化上下文（block formatting context) ，反正看了听了也不懂。（可以简单理解为生成了一个封闭的空间，内部元素出不来，外部元素进不去，具有很强的防御性）

         核心理念：只要一个元素具有bfc，内部元素如何折腾都不会影响到外面的元素。

         思考：

               我们上面说的margin重叠问题，以及float元素导致父元素高度塌陷问题。

              是不是这样理解，只要这个父元素具有了bfc，那float导致的高度塌陷问题也就解决          了？如果bfc不解决高度塌陷问题，则与它的“核心理念”就背道而驰了。不解决这个问            题，那必然会影响到外面元素的问题。

               至于margin重合问题，如果该元素有bfc，如果margin重合问题依然存在，那势必           影响到外面元素。（联想一下，父元素和第一个子元素和最后一个子元素的的重叠问               题，如果第一个子元素具有了bfc，而它的重合问题依然存在，必然与“核心理念”背道             而驰）

         解决的问题：

              1.margin重叠问题解决了

              2.高度塌陷问题解决了

        问题来了，如何使一个元素具有bfc？

        让一个元素具有bfc的条件有哪些？

       

• <html>根元素;

• float 的值不为 none;

• overflow 的值为 auto、scroll 或 hidden;

• display 的值为 table-cell、table-caption 和 inline-block 中的任何一个;

• position 的值不为 relative 和 static。 

   

       我们想想：我们之前写的清除浮动，不就是父元素{overflow:hidden},其实它是生成了bfc，解决了高度塌陷问题。

        所以，我们以后遇到margin重叠问题，高度塌陷问题，第一时间想到bfc可以解决。  

        我们平时很常用的解决方式就是 overflow:hidden(因为它造成的影响相对较小)

        其实这里，我们经常遇到的想不通的css问题都迎刃而解了，那其实bfc最最重要的特性是构建流式布局。

        ** 面试常见问题： 左边固定宽度，右边自适应布局

       最最常见的解决方案：

// 方法1
.left{
 float:left;
 width:200px;
 height:200px
}
.right{
  overflow:hidden
}
// 方法2
.left{
 float:left;
 width:200px;
 height:200px
}
.right{
  display: table-cell; width: 9999px}// 以上均支持ie8及其以上适配               复制代码

2.3 BFC的总结

       在我们水平还有限的情况下，只需要记住：当我们遇到margin重叠，高度塌陷问题，流式布局问题，第一印象想到bfc。想到生成bfc的条件，以及最常用的解决方法即可。