弹性布局（display：flex）

弹性布局（display：flex）

1. 容器和项目

   容器：父元素

   项目：子元素

2. 主轴和交叉轴

   主轴：默认情况下，水平向右

   交叉轴：默认情况下，垂直向下

3. 换行(flex-wrap)

     /* 创建弹性布局 所有子元素默认在一排显示 */
       /* 诺项目总宽度超过容器宽度，不会换行，会等比例压缩项目宽度 */
       display: flex;
   	 /* 自动换行 */
       flex-wrap: nowrap;
   	/* 换行 */
       flex-wrap: wrap;
   	/* 反转，倒叙换行 */
       flex-wrap: wrap-reverse;
   

4. 主轴方向上的布局（justify-content）

   	/* 主轴方向上的布局 */
       /* 默认情况 开始对齐 */
       justify-content: flex-start;
       /* 结束对齐 */
       justify-content: flex-end;
       /* 居中对齐 */
       justify-content: center;
       /*项目和容器的距离和项目与项目距离相同 */
       justify-content: space-evenly;
       /* 项目与容器距离为0 均匀分开 */
       justify-content: space-between;
       /* 项目与容器的距离使项目与项目距离的一半 平均对等分开*/
       justify-content: space-around;
   

5. 交叉轴方向上的布局（align-items）

    /* 交叉轴方向布局 */
       align-items: flex-start;
       align-items: flex-end;
       align-items: center;
       baseline: 项目的第一行文字的基线对齐。
   	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
   

6. 转换主轴和交叉轴(flex-direction)

   flex-direction: column;
   /*属性*/
   row（默认值）：主轴为水平方向，起点在左端。
   row-reverse：主轴为水平方向，起点在右端。
   column：主轴为垂直方向，起点在上沿。
   column-reverse：主轴为垂直方向，起点在下沿。
   

7. flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

8. align-content属性：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

   属性值：
   flex-start：与交叉轴的起点对齐。
   flex-end：与交叉轴的终点对齐。
   center：与交叉轴的中点对齐。
   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   stretch（默认值）：轴线占满整个交叉轴。
   

9. IE盒子计算宽高的方法

   计算元素真实宽：宽=（左右两边的padding+左右两边的border）+width

   计算元素真实高：高=（上下两边的padding+上下两边的border）+heigh

   /*box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
   
   例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。*/
   
   box-sizing:border-box;
   
   /* 超出部分隐藏 */
   
     overflow: hidden;
   

10. 解决图片问题

    /* 解决图片按照inline-block(行内块)排版留下的3px间隙 */
    /* .main4_item img{ */
    /* 垂直对齐 */
    /* vertical-align: top; */
    /* } */