千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

怪异盒模型：box-sizing

    content-box：标准盒模型

    border-box：怪异盒模型---原始设置的css宽高不变，向内挤压内容区域

                            不会在受到border padding的影响

弹性盒-新的布局方式 适合移动端布局

    父元素加上：display：flex-弹性盒

              子元素默认横向排列

              子元素是行内元素直接变成块元素进行css样式的设置

              子元素只有一个元素的时候加 margin：auto 子元素自动水平垂直居中

修改主轴方向：

 主轴：默认横向排列    主轴可通过属性改为纵向排列此时主轴纵向排列侧轴为横向

 侧轴：纵向排列

 修改主轴方向 flex-direction：

                   column-纵向排列                 竖直方向

                   column-reverse-纵向的反向排列

                   row-横向排列                    

                   row-reverse-横向的反向排列  

主轴侧轴对齐方式：justify-content：（切记主侧轴问题）

               flex-start--默认

               flex-end--主轴方向靠右边对齐

               center--中间对齐

               space-between--两端对齐

               space-around--距离环绕

调整侧轴的属性：align-items：

              flex-start--默认

              flex-end--侧轴方向靠底

              center--侧轴方向居中（如果同时设置，这时候子元素水平垂直居中）

折行与行间距：切记主侧轴问题

    折行：flex-wrap：wrap/nowrap-不折行

    行间距：align-content：

           flex-start--默认挨着上边界紧密相贴

           flex-end--挨着下边界所有子元素紧密相贴

           center--在中间所有子元素紧密相贴（贴左边开始）

           space-between--贴着两端的等距离排列

           space-around--等距离环绕，在一行能盛下的情况下等间距排列

项目对齐方式：（父元素里面的子元素设置）大盒子为容器 里面的为项目--注意主侧轴调换

    align-self：

         flex-start--默认

         flex-end--去底部

         flex-center--中间

         flex-baseline--

         flex-stretch--拉伸 不设置高度后会占满整个屏幕

项目调整顺序：order--顺序值越大越往后面跑   默认为0 可以设为负数

项目剩余宽高：flex：1--方便三栏布局 设置哪个哪个就占满剩余空间

横向滚动：flex-shrink：0（不受挤压）/1（挤压）  配合 overflow：auto使用