一、布局分类

1. 两种

• 固定宽度布局，一般宽度为 960 / 1000 / 1024 px
• 不固定宽度布局，主要靠文档流的原理来布局

2. 文档流本来就是自适应的，不需要加额外的样式
3. 第三种布局：响应式布局

• 意思就是PC上固定宽度，手机上不固定宽度，也就是一种混合布局

二、float 布局

1. 步骤

• 子元素上加float: left/right和 width
• 在父元素上加 .clearfix
• 不需要做响应式，因为手机上没有 IE，而这个布局是专门为 IE 准备的
• IE 6/7 存在双倍 margin bug，解决办法有两个：针对 IE 6/7 把 margin 减半；再加一个 display: inline-block
• 元素居中建议写：

  margin-left: auto;
  margin-right: auto;

• 平均布局可能会使用负maigin

三、flex 布局

1. flex container样式：

• 让一个元素变成 flex 容器

.container{
display: flex;/*or inline-flex*/
}

• 改变 items 流动方向（主轴）

.container{
flex-direction:row（横 从左往右） | row-reverse（逆横 从右往左） | colum（竖 从上到下） | colum-reverse（逆竖 从下到上）;
}

• 改变折行

.container{
flex-wrap: mowrap（不折行 默认） | wrap（折行） | wrap-reverse（从下向上折行 一般不用）;
}

• 主轴对齐方式（默认主轴是横轴 除非改变了 flex-direction 方向）

.container{
justify-content: flex-start（往开始方向） | flex-end（往末尾方向） | center（居中对齐） | space-between（空隙放到中间，两边不留空隙） | space-around（空隙围绕内容周围，左右两边空隙平均） | ;space-evenly（空隙围绕内容周围，空隙平均，一般不用）
}

• 次轴对齐（默认次轴是纵轴）

.container{
align-items: stretch（上下两端对齐） | flex-start（上方对齐） | flex-end（下方对齐） | center（居中对齐）
}

2. flex item属性（item 的样式）

• item上面加order：改变顺序
• item上面加 flex-grow：分配多余空间
• flex-shrink ：控制如何变瘦，控制空间不够时谁缩小；一般写flex-shrink: 0 防止变瘦，默认是 1
• flex-basis 控制基准宽度，默认是 auto
• 缩写：flex: flex-grow flex-shrink flex-basis 用空格隔开
• align-self 定制 align-items，使某一个items单独定位

四、Grid 布局

1. 成为 container

.container{
display: grid | inline-grid;
}

2. 行和列

.container{
grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows: 25% 200px auto;
}

3.item 可以设置范围

.item-a { 
  grid-column-start: 2; 
  grid-column-end: five; 
  grid-row-start: row1-start; 
  grid-row-end: 3; 
}

4. fr - free space 巧记：份

.container{
grid-template-columns:1fr 1fr 1fr;
}
.container{
grid-template-columns:1fr 50px 1fr 1fr;
}

5. 分区 grid-template-areas

.a{
grid-area: header/main/sidebar/footer/empty;
}

.container{
diaplay:grid;
grid-template-columns:50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer"
}

6. 空隙gap

.container{
diaplay:grid;
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}