弹性盒子的简介与问题

CSS3中较为重要点在于弹性盒子，动画以及媒体查询。而这次我讲的主要是弹性盒子以及一些小问题

弹性盒子：

• 弹性盒子是C3中的一种新的布局格式【1】，让页面中的元素可根据设备屏幕的大小自行调整布局的方式。
  【1】：像以前的布局方式有表格布局（基本淘汰），浮动，定位，偏移等…
• 弹性盒子的使用可让你的代码量有所减少。

弹性盒子内容

• 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
• 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
• 弹性容器内包含了一个或多个弹性子元素。

属性介绍（主介绍flex）：
flex属性是弹性盒子中一种复合写法，主要是设置或检索伸缩盒对象的子元素如何分配空间。
它的取值有三个，分别为

• flex-grow
  用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
  在「flex」属性中该值如果被省略则默认为「1」
• flex-shrink
  用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
  在收缩的时候收缩比率会以伸缩基准值加权
  在「flex」属性中该值如果被省略则默认为「1」
• flex-basis用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
  在「flex」属性中该值如果被省略则默认为「0%」
  在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <’ width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

举个例子：我有1L牛奶，现在有两个小孩一男一女,男的要喝500ml(flex-basis值)，女的要喝300ml(flex-basis)值,现在看他们总量是否超过1L，超过则按收缩值在原来基础上扣除一些牛奶（flex-shrink），没超过则按扩张值在原来基础上在多加一些牛奶(flex-grow)。

如果你们看懂上面的例子那我们直接上代码

–未超出总量时

<style>
        .milk {
            width: 1000px;
            height: 150px;
            background-color: #ccc;
            display: flex;/* 玩它你先设置它*/
        }
        
        /* 男 */
        .bMilk {
            width: 500px;
            background-color: rgba(0, 68, 255, .6);
            flex: 1 1 auto;/*分配 上面我已经定义了width，所以这里写auto*/
        }

        /* 女 */
        .gMilk {
            width: 300px;
            background-color: rgba(255, 0, 170, .6);
            flex: 1 1 auto;/*分配 上面我已经定义了width，所以这里写auto*/
        }
    </style>
    
    <!-- 当两个孩子的总量没有超标时 -->
    <!-- 奶1L(width:1000px) -->
    <div class="milk">
        <!-- 男孩要喝的牛奶500ml(width:500px)-->
        <div class="bMilk"></div>
        <!-- 女孩要喝的牛奶300ml(width:300px)-->
        <div class="gMilk"></div>
    </div>

效果
初始：
被扩张后

其实这有套公式：当子量没有超过父量时
多余的 width：1000-（500(男开始量)+300(女开始量)）=200；
因为男的女的flex-grow都为1
所以
男 width：(1/(1+1))*200(多余的with)+500(男开始量)=600
女 width：(1/(1+1))*200(多余的with)+300(女开始量)=400

–当超出总量时

<style>
        .milk {
            padding: 8px 0;
            width: 1000px;
            height: 150px;
            background-color: #ccc;
            display: flex;
        }

        /* 男 */
        .bMilk {
            width: 700px;
            flex: 1 1 auto;
            background-color: rgba(0, 68, 255, .6);
        }

        /* 女 */
        .gMilk {
            width: 500px;
            flex: 1 1 auto;
            background-color: rgba(255, 0, 170, .6);
        }
    </style>
    
    <!-- 当两个孩子的总量超标时 -->
    <!-- 奶1L(width:1000px) -->
    <div class="milk">
        <!-- 男孩要喝的牛奶700ml(width:700px)-->
        <div class="bMilk"></div>
        <!-- 女孩要喝的牛奶500ml(width:500px)-->
        <div class="gMilk"></div>
    </div>

效果
初始：

因为我上面设置了男女的flex-shrink都为1，这个数字是怎么得到的了？
超出部分 widht：（男的width+女的width）-总量=（700+500）-1000=200；
flex-shrink ：男女都为1
所以男女总的width：1200；
男的应该被减去width：1(flex-shrink)700/1200200=116.67(保留两位)
男的实际的width：700-116.67=583.33
女的应该被减去width：1(flex-shrink)500/1200200=83.33(保留两位)
女的实际的width：500-83.33=416.67
的出来的得数会有小数点后面的微小误差

你可改变女的flex-shrink的值再去计算，例如改成5，F12看男的元素的width会和计算出来的男的width一样。

---

注意： 
1.弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

2.弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。（flex-wrap:wrap --可换行）

如要学习更多有关弹性盒子知识可参考：

• 菜鸟： https://www.runoob.com/css3/css3-flexbox.html
• CSS参考手册： http://css.doyoe.com/（推荐）

---

这之下是我在项目中遇到的个小问题

如：当我有左右两个盒子设置，如图左边的盒子上面的设置最小宽度，下面的设置固定，右边则让其宽度100%。看两者的区别。

并且当你改变浏览器宽度时下面左盒子的固定宽度的设置并没有用，它会随着浏览器收缩宽度改变。而上面左盒子min-width，会让其保持宽度不变。

总结： 弹性盒子的难点在于复合flex里，对盒子的伸缩计算。在是实际运用中的一些细节。