flex伸缩布局

---

一、flex布局体验

1.传统布局与flex布局

1. 传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端很好的布局

2. flex弹性布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE11或更低版本，不支持或仅部分支持

建议：

1. 如果是pc端页面布局，使用传统布局比较好
2. 如果是移动端或者不考虑兼容性问题的pc端页面布局，使用flex弹性布局

2.初体验

1. 搭建HTML结构

 <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

 div {
   
            display: flex;
            width: 80