怪异盒模型+弹性盒模型+多列

怪异盒模型

          怪异盒模型   box-sizing:border-box;
            
                       怪异盒子包括了border 和 padding  添加边框和内填充不会把盒子撑大 会保持原有大小

弹性盒模型

 弹性盒的特点 
               
              1  弹性盒的最近一层子元素可以设置大小 忽略元素类型
              2  单个子元素在弹性盒垂直水平居中  margin:auto;
              3  弹性盒的布局是根据主轴进行排列  默认X轴为主轴  Y轴为侧轴


     一   触发弹性盒
               display:flex;


     二   改变弹性盒的主轴方向
      
            flex-direction:;
                   row  默认  X轴
                   column    Y轴
                   row-reverse  反向X轴
                   column-reverse  反向Y轴
                   
    三    改变主轴的对齐方式
            justify-content:;
                默认     flex-start   X左端
                         flex-end     X右端
                         center       居中
                         space-between 两端对齐 中间均分
                         space-around  相当于平均分配 每个元素有相同的左右margin值

    四    改变侧轴的对齐方式
            align-items:;
                         flex-start   Y上端
                         flex-end     Y下端
                         center       居中
                         baseline     与Y上端效果一样
                         stretch  默认拉伸
   
    五    改变元素换行 
            flex-wrap
                        wrap   换行
                        nowrap 不换行

    六    改变多行元素的对齐方式 
            align-content
                         flex-start   Y上端
                         flex-end     Y下端
                         center       居中
                         space-between 两端对齐 中间均分
                         space-around  相当于平均分配 每个元素有相同的左右margin值

    
    
    flex-flow  简写形式   flex-direction  与 flex-wrap的简写形式
              
                  大多数 flex-flow:row wrap;


    以上都是加在弹性盒上的 
    
    
    
    
    
    
    
    以下加在弹性盒最近一层的子元素上
    
    
    
    七    弹性盒剩余空间的平均分配
         
                flex:1; 

    八    元素的排列顺序
    
              order  数值越大  越往后排列

    九    单个子元素的排列方式

            align-self:;
                         auto  默认继承父元素的align-items
                         stretch      拉伸
                         flex-start   Y上端
                         flex-end     Y下端
                         center       居中

    十    flex-xxx
                       flex-grow    如果所有子元素都加了一将会平均分配  只给一个加会把父元素剩于空间给到当前元素    
                       flex-shrink   默认值为1   压缩  防止当子元素之和大于父元素 会压缩子元素 如果不想压缩子元素将值改为0
                       flex-basis   相当于宽度

多列

   多列      
               一般用于比较长的文章或报纸的排版


               column-count:;   列数

               column-gap:;   每列直接的间距

               column-rule:;   每列直接的间隔线
                               width
                               style
                               color

               column-fill:;   自适应列的高度
                              auto  
                              balance  根据最高一列的高度

               column-span     跨所有的列  一般就是多列的标题

               column-width    每列的宽度

               columns        列数和列宽的简写