CSS布局方式

CSS的常见的布局方式
（1）flex布局

采用flex布局的元素叫做容器，其所有的子元素自动成为容器成员，成为flex项目

容器属性：

• flex-direction：row | row-reverse | column | column-reverse
  row: 主轴为水平方向，起点在左边
  row-reverse：主轴为水平方向，起点在右方
  column：主轴为垂直方向，起点在上沿
  column：主轴为垂直方向，起点在下方
• flex-wrap：nowrap｜wrap｜wrap-reverse
  nowrap：不换行（默认）
  wrap: 换行，第一行在上方
  wrap-reverse：换行，第一行在下方
• flex-flow： flex-direction 和 flex-wrap的简写形式
• justify-content：flex-start ｜ flex-end ｜ center ｜ space-between ｜ space-around
  
• align-items：定义项目在交叉轴上如何对齐
  flex-start｜flex-end｜center｜stretch｜space-between｜space-around｜stretch
  

项目属性

• order：定义项目的排列顺序，数值越小，排列越靠前，默认为0
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
  如果所有项目的flex-grow属性为1，则它们将等分剩余空间（如果有的话），如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间比其他项多一倍
• flex-shrink：定义项目的缩小比例，默认为1，如果空间不足，该项目会缩小
  如果所有的项目的flex-shrink都为1，当空间不足时，都将等比例缩小，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性不生效。
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目本来大小
• flex：flex-grow，flex-shrink，flex-basis的缩写

（2）grid布局
网格布局（grid）是最强大的css布局
采用网格布局的区域叫做容器，容器内部采用网格定位的子元素，称为项目。

容器属性

• display: grid ｜ inliine-grid 指定一个容器采用网格布局
• grid-template-columns: 定义每一列的宽度
• gird-template-rows：定义每一行的行高
• grid-row-gap：用来设置行间距
• grid-column-gap：用来设置列间距
• grid-gap：

项目属性

• grid-column-start：左边框所在的垂直网格线
• grid-column-end：右边框所在的垂直网格线
• grid-row-start：上边框所在的水平网格线
• grid-row-end：下边框所在的水平网格线
• grid-column：是grid-column-start 和 grid-column-end 的简写
• grid-row：是grid-row-start 和 grid-row-end 的简写

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

• justify-self：设置单元格内容的水平位置（左中右）
• align-self：设置单元格内容的垂直位置（上中下）
• place-self：align-self属性和justify-self属性的合并简写形式。

圣杯和双飞翼布局，都是三栏，中间自适应的布局

（3）圣杯布局

1. 首先把left、middle、right都放出来
2. 给它们三个设置上float: left, 脱离文档流
3. 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
4. left、right设置上各自的宽度
5. middle设置width: 100%
   接下来比较重要
6. 给left、middle、right设置position: relative;
7. left设置 left: -leftWidth, right设置 right: -rightWidth;
8. container设置padding: 0, rightWidth, 0, leftWidth;

  
  
  
  
  



  
header
  

    

      
middle
      

        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddle
      
    
    

      
left
      

        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      
    
    

      
right
      

        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      
    
  
  
footer

（4）双飞翼布局
双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

1. 首先把left、middle、right都放出来, middle中增加inner
2. 给它们三个设置上float: left, 脱离文档流；
3. 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
4. left、right设置上各自的宽度
5. middle设置width: 100%
   接下来和圣杯布局不一样的地方
6. left设置 margin-left: -100%, right设置 right: -rightWidth
7. container设置padding: 0, rightWidth, 0, leftWidth

  
  
  
  
  



  
header
  

    

      

        
middle
        

          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddle
        
      
    
    

      
left
      

        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      
    
    

      
right
      

        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      
    
  
  
footer

参考文献：https://juejin.cn/post/684490...