day15弹性盒子、变异盒模型

一.盒模型的分类

  1、标准盒模型

  组成：content(width+height)+padding+border+margin 宽度：width+padding左右+border左右

  2、怪异盒模型

  组成：content+padding+border+margin 宽度：width=content(自动压缩后的宽度)+padding左右+border左右

  3.转换

   box-sizing:content-box;--------转换为标准盒模型（默认值）

   box-sizing:border-box;---------转换为怪异盒模型

二.弹性盒子

  1.作用

  用来控制子元素的排列方式 关键词： 容器：父元素 项目（子项）：子元素

  2.特点

   1.使所有子元素横向排列 2.使所有子元素不换行（子元素比较少按照自己定义的样式横向排列，过多出现自动压缩） 3.所有子元素可以定义宽高（转化为块元素） 4.父元素是弹性盒子，子元素的margin:auto;起作用

  3.使用

  1.父元素添加

    1.flex-direction

    主轴排列方式flex-direction:row;|row-reverse;|column;|column-reverse;

flex-direction:row;-------------------沿着X轴方向从左向右 
flex-direction:row-reverse;-----------沿着X轴方向从右向左 
flex-direction:column;----------------沿着Y轴（交叉轴）方向从上向下 
flex-direction:column-reverse;--------沿着Y轴（交叉轴）方向从下向上

    2.justify-content

    主轴对齐方式:

    justify-content：flex-start;|center;|flex-end;|space-between;| space-around;|space-evenly;

flex-start:默认值 主轴的排列方式 
flex-end：内容从右向左（内容是一个整体，整体从右向左） 
center:内容居中 space-between:在主轴方向两端对齐，剩余空间均分 
space-around:剩余空间平均分配到左右两侧（相当于margin-left = margin-right） 
space-evenly:剩余空间均分

    3.align-items

    单行子项在Y轴的对齐方式:

    align-items:flex-start;|center;|flex-end;| baseline;| stretch;

flex-start: 在y轴从上向下（内容是一个整体） 
flex-end: 在y轴从下向上（内容是一个整体） 
center: 在Y轴居中（中线居中） 
baseline: 在y轴基线对齐 
stretch：默认值 拉伸，当子项高度没有定义的时候，子项高度默认继承父级高度

    4. flex-wrap

    换行:

    flex-wrap:nowrap;|wrap;|wrap-reverse

nowrap-----默认值不换行 
wrap------换行 
wrap-reverse----------反向换行（第一行在最下面）

    5.align-content

    多行子项在y轴对齐方式:

    align-content:flex-start;|center;|flex-end;|space-between;| space-around;|space-evenly;

flex-start:默认值 主轴的排列方式 
flex-end：内容从右向左（内容是一个整体，整体从右向左） 
center:内容居中 space-between:在主轴方向两端对齐，剩余空间均分 
space-around:剩余空间平均分配到左右两侧（相当于margin-left = margin-right） 
space-evenly:剩余空间均分

  2.子项添加

    1.align-self

    子项在垂直方法的排列方式

auto:默认值 
flex-start: 在y轴从上向下（内容是一个整体） 
flex-end: 在y轴从下向上（内容是一个整体） 
center: 在Y轴居中（中线居中） baseline: 在y轴基线对齐 
stretch： 拉伸，当子项高度没有定义的时候，子项高度默认继承父级高度

    2.order:n;

    子项的排列顺序 n默认值 0 数字越小排列顺序越靠前，数字越大排列顺序越靠后

    3.flex-grow

    该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex:2; 默认值：0；

    4.flex-shrink

    flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩 flex-shrink:0; 1:默认值，可以挤压 0：不挤压

    5.flex-basis

    子项的长度,flex-basis basis 的中文意思就是 基础、基准 ，该属性用来设置元素的宽度，通常情况下大家使用 width 设置宽度。但是如果元素上同时设置了 width 和 flex-basis ，那么 width 的值就会被 flex-basis 覆盖掉。

    6.flex复合属性

     flex: flex-grow flex-shrink flex-basis;

flex:1 0 auto;=flex:1;------扩展

flex:0 1 auto;--------------挤压

flex:0 0 auto;--------------默认