一、布局

1、分类

• 固定宽度布局，一般为960/1000/1024px
• 不固定宽度布局，主要靠文档流原理
• 响应式布局，PC上固定宽度，手机上不固定宽度

2、思路

• 从大到小

• 从小到大：新人推荐

3、布局套路

二、float布局

1、步骤

• 子元素加上float:left和width

• 父元素上加.clearfix

  .clearfix::after {
    content:'';
    display:block;
    clear: both;
  }
  

2、tips

• 有经验者会留一些空间或最后一个不设width

• 不需要做专门的响应式，因为手机没有IE，这个是专为IE浏览器准备的

• IE6/7存在双倍margin bug，解决办法是：

  1. 针对IE6/7把margin减半

  2. 再加一个display:inline-block

• 有时候设置了box-sizing:border-box，用border调试法会受到干扰，可以将border改为outline

3、实践

不同布局：

• 用float用两栏布局（如顶部条）

• 用float做三栏布局（如内容区）

• 用float做四栏布局（如导航）

• 用float做平均布局（如产品展示区）

三、flex布局

1、container的样式

1.1让一个元素变成flex容器

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

1.2改变items流动方向(主轴)

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

1.3是否折行

.container {
    flex-wrap:nowrap | wrap | wrap-reverse;
}

1.4主轴的对齐方式

默认主轴是横轴，除非改变flex-direction方向

.container {
    justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly
}

1.5次轴的对齐方式

默认次轴是纵轴

.container {
    align-items:stretch | flex-start | flex-end | center | baseline
}

多行内容分布（比较少用）

.container {
    align-content:flex-start | flex-end | center | space-between | space-around | stretch
}

2、item的样式

2.1order

默认的order都是0，如果设置了order，则会按照从小到大排列

2.2flex-grow

分配空间，每个item获得的空间大小

2.3flex-shrink

当空间不够时，每个item缩放的大小，默认为1

一般写flex-shrink:0;

2.4flex-basis

控制基准宽度

缩写：

• flex: flex-grow;flexshrink;flex-basis

2.5align-self

某个item单独在纵轴的对齐方式

3、实践

• flex做两栏布局

• flex做三栏布局

• flex做四栏布局

• flex做平均布局

• flex组合使用，做更复杂的布局

tips:

1. 不要把width和height写死

2. 用min-width/min-height/max-width/max-height

3. flex基本可以满足所有需求

4. flex搭配margin-xxx:auto

四、grid布局

grid适合不规则布局

1、让一个元素成为grid容器

.container {
    display:grid/* or inline-grid */
}

2、行和列

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

还可以给每根线取名字：

.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto
[col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line]
auto [last-line];
} 

3、free-space 平均设置空间

.container {
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    /*设置两行三列*/
}

4、设置item范围

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

5、grid-template-areas

.container {
    display:grid;
    grid-template-columns:50px 50px 50px 50px;
    grid-template-rows:auto;
    grid-template-area:
        "header header header header"
        "main main .sidebar"
        "footer footer footer footer"
}
.item-a {
    grid-area:header;
}
.item-b {
    grid-area:main;
}
.item-c {
    grid-area:sidebar;
}
.item-d {
    grid-area:footer;
}

6、grid gap

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