弹性盒与多列知识点梳理

弹性盒

（1）怪异盒模型：

  box-sizing:
    属性值：border-box; ---触发怪异盒模型
    特点：border和padding直接添加在盒子宽高的内部。 
    缺点：存在兼容性，移动端可以使用，pc端尽量少用。

（2）弹性盒：

作用：控制盒子子元素的布局方法
特点：
1：弹性盒子默认的主轴是x轴
2：弹性盒的子元素为灵活元素，可以直接添加宽高
3：如果一个子元素在弹性盒子里面上下左右居中，只需要给子元素添加margin:auto;

触发弹性盒：
display:flex; (inline-flex)

在父元素上添加的属性：
    01 justify-content:控制父元素中主轴的子元素的排列方式;主轴默认为x轴。
      属性值有：
      			flex-start---初始位置。 flex-end---结束位置。center---居中。 
                space-between---两端靠边，中间平均分配。space-around---平均分配。
                space-evenly---自动对齐，多余的空间会分配待元素的两侧，但是不会叠加！
                
    02 align-items:控制父元素中侧轴的子元素的排列方式。
    
    03 flex-direction: column;控制主轴的方向
      属性值：默认主轴为x轴，column---这是修改主轴为y轴。
      
    04 flex-wrap: wrap; 控制父元素中子元素是否换行
      属性值：默认不换行，wrap（换行）。
      
    05 align-content: center;   控制侧轴多行情况下的对齐方式,就是侧轴中一行与一行的对齐方式
      属性值：center,space-between等等


 在子元素上添加的属性：
    01 flex：数值。---就是子元素在父元素中占据几等分
      假如为flex:1;就是子元素平分父元素的。

      flex属性里面是复合写法：
      flex-grow---就是把父元素剩余空间的平分（按照比例分）
        假如ul设置弹性盒宽500px，li的宽度为100px,然后也就是剩余空间为200px，
        假如第一个liflex-grow:1,假如第二个liflex-grow:2；那么200px/3 = 66.7（一份） 
        也就是第一个li 100px+66.7px； 第二个li 100px+133.3px
      flex-shrink---就是设置父元素中子元素在主轴上是否压缩（1为压缩，0为不压缩）
      flex-basis---相当于给元素设置了宽度，但时当设置了flez-basis之后，width的值不起效果了！

    02 align-self: flex子项单独在侧轴（纵轴）方向上的对齐方式
        flex-start;---开始的位置。
        center;---中心的位置。
        flex-end;---底下的位置。

    03： order  ---number排序优先级，数字越大越往后排，默认为0，支持负数。

  注意点：
   flex-shrink:0; 弹性盒子子元素在主轴不会挤压（与父元素添加overflow: auto;搭配，实现子元素在父元素主轴上显示，而且不压缩）

多列

多列属性：

  1、column-count ---控制列数（number值）
  2：column-gap ---控制列与列之间的间距
  3: column-rule --- 设置或检索对象的列与列之间的边框
    column-rule-width规定列之间规则的宽度
    column-rule-color规定列之间规则的颜色。
    column-rule-style规定列之间规则的样式。
  4：column-fill --- 设置或检索对象所有列的高度是否统一（就是充满容器）
    auto：列高度自适应内容
    balance：所有列的高度以其中最高的一列统一(默认值)
  5：column-span --- 设置或检索对象元素是否横跨所有列。
    设置在需要跨列的自身，比如h1，
    none---不垮列。  all --- 代表的是横跨所有列
  6：column-width --- 设置或检索对象每列的宽度
  
  **注：Internet Explorer 10 和 Opera 支持多列属性。
        Firefox 需要前缀 -moz-。
        Chrome 和 Safari 需要前缀 -webkit-。**