每日一结笔记

一、弹性盒概念

     什么是弹性盒子？
            弹性盒子是css3的一种新的布局模式
            引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

            弹性容器：父元素
            项目：弹性子元素 --子元素
            主轴：默认主轴为水平方向 起点在左侧 终点在右侧
            侧轴：交叉轴，垂直方向 起点在上侧 终点在下侧

            注意：主轴不一定为水平方向，还可以为垂直方向
            弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
            将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效
            弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即便是行内元素也可以设置宽高

二、设置主轴方向

          设置主轴方向
            默认值 水平方向 起点在左侧 终点在右侧 
            flex-direction: row;
            水平方向 起点在右侧 终点在左侧 
            flex-direction: row-reverse;
            垂直方向 起点在上侧 终点在下侧
            flex-direction: column;
            垂直方向 起点在下侧 终点在上侧
            flex-direction: column-reverse;

三、主轴对齐方式

        主轴x 水平方向
            display: flex;
             容器属性 主轴对齐方式
             弹性子元素在主轴上的排列方式
  默认值，主轴顶端对齐
            justify-content: flex-start;
        主轴的末端对齐
            justify-content: flex-end;
        主轴的居中对齐
            justify-content: center;
             空白空间
        两端对齐，子元素和子元素之间有空白空间，项目之间的间隔都相等
            justify-content: space-between;
        四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配，项目之间的间隔比项目与边框的间隔大一倍
            justify-content: space-around;
         平均对齐 弹性项目平均分布在该行上，相邻项目的间隔，项目与容器之间空间相等
            justify-content: space-evenly;
  
四、侧轴对齐方式

     主轴x 水平方向 
            display: flex;
         侧轴：垂直方向 容器属性--设置在弹性容器上
         默认值，当弹性子元素没有设置高度或者高度为auto的时候，高度跟父元素高度一样
            align-items: stretch;
        子元素在侧轴顶端对齐
            align-items: flex-start;
        子元素在侧轴末端对齐
            align-items: flex-end;
        子元素在侧轴居中对齐
            align-items: center;

五、换行属性

         换行属性 容器属性--写在弹性容器上
             默认值 不换行
            flex-wrap: nowrap;
            换行 第一行显示在上方
            flex-wrap: wrap;
            换行 第一行显示在下方
            flex-wrap: wrap-reverse;

六、align-content属性

        注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙
              父元素高度由内容撑开换行没有缝隙
        align-content属性：折行，行与行之间有间隙，去除间隙（去掉了中间的间隙)
        要设置：flex-wrap：wrap；
        align-content：flex-start;顶端没有行间距
        align-content:flex-end;底对齐没有行间距
        align-content:center；居中没有行间距
        align-content:space-between;两端对齐，中间自动分配，元素位于各行之间留有空白空间
        align-content:space-around;自动分配距离，元素位于各行之前、之间、之后都留有空白空间、中间的间距是两端间距的两倍
        align-content:space-evenly;平均对齐，元素位于各行之前、之间、之后都留有空白空间，行间距自动分配，间距相等。

七、项目属性

        项目属性：属性设置在子元素身上
        剩余空间分配：flex：n
        把剩余空间分成了3份
        剩余空间：500-9.39*4
        （500-9.39*4）/3=?

八、弹性盒水平垂直居中

      display: flex;
         主轴居中 
            justify-content: center;
        侧轴居中 
            align-items: center;
      
九、align-self属性
 
        单个子元素在侧轴对齐方式
         align-self: stretch;
         align-self: flex-start;
         align-self: flex-end;
         align-self: center;

        align-items和align-self区别：
          1.align-items控制所有子元素在侧轴对齐方式，设置弹性容器上
          2.align-self控制自身在侧轴对齐方式，设置在弹性子元素身上

十、order属性

         order属性：子元素的排列次序
        属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前
        必须为整数，不能为小数，可以为负数

十一、 flex-grow属性

        flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候）
        属性值为数值，没有单位，默认值为0，表示不放大
        负值对该属性无效
        可以为小数
        注意：当容器有剩余空间时有效

十二、  flex-shrink属性

        flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）
        属性值为数值，没有单位
        默认值为1，表示当空间不足时，等比例缩小
        属性值为0，表示当空间不足时，不缩小
        负值对该属性无效
        可以为小数