CSS三大布局-float、flex、grid

1.前言

（文章为学习总结，可能不太详细，只是针对重要的知识点回顾）

1.布局是什么？

  布局就是把页面分成一块一块的，然后按照左中右、上中下进行排列

2.布局分类分为两种

（1）固定宽度布局，一般宽度为960px、1000px、1024px

（2）不固定宽度布局，主要靠文档流的原理进行

其实还有第三种布局方式：响应式布局，它就是手机上不固定宽度，pc端固定宽度

2.float布局

想让块级元素在一行上，使用float布局

（1）给子元素添加

float：left；
width：xxpx；

（2）在父元素上添加.clearfix

.clearfix::after{
   content:"";
   clear:both;
   overflow:hidden;
}

注意：留一些空间或者最后一个元素不设置宽度（width）；

           IE6/7存在双倍margin的问题：针对IE6/7的margin减少一半

margin-left:20px;
_margin-left:10px

3.flex布局

flex布局分为container和item

1.container属性

（1）将容器改为flex容器

.container{
   display:flex;}

（2）改变主轴方向

.container{
   flex-direction:row/row-reverse/column/column-reverse;
}

（3）换行

.container{
   flex-wrap:wrap/no-wrap/wrap-reverse;
}

（4）主轴对齐方式

.container{
   justify-content:center/flex-start/flex-end/space-between/space-around;
}

（5）次轴对齐方式

.container{
   align-items:center/flex-start/flex-end;
}

2.items属性

（1）order

谁在前面，后面的值越小越靠前

（2）flex-grow

（3）flex-shrink

4.grid布局

（1）

container：五行三列

 .container {  
            display: grid;
            grid-template-columns: 40px 50px auto 50px 40px;
            grid-template-rows: 60px 100px 50px;
 }

items：这个就是header

.a {
            grid-column-start: 1;
            grid-column-end: 6;
            grid-row-start: 1;
            grid-row-end: 2;

 }

（2）header、aside、main、ad、footer经典布局

container

    .container {
            display: grid;
            grid-template-rows: 60px auto 60px;
            grid-template-columns: 300px auto 200px;
            border: 1px solid red;
            grid-template-areas:
             "header header header "
             "aside main ad" 
            ". footer footer "; 
           min-height: 100vh; 
           /* grid-gap: 10px; */ 
           grid-row-gap: 10px; 
           grid-column-gap: 10px; 
       }

items

.a {
       grid-area: header;
 }                
.b {
       grid-area: aside;
 }                
.c {    
       grid-area: main;
}               
 .d {            
       grid-area: ad; 
}               
 .e {           
       grid-area: footer
}