传统布局方式和flex弹性布局方式的对比：
传统布局<style> * { padding: 0; margin: 0; } main, footer { border: solid 1px #ddd; box-sizing: border-box; } main { background: #ddd; height: 100vh; padding-bottom: 55px; background-clip: content-box; } footer { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; } footer div { width: 33%; float: left; text-align: center; line-height: 3em; height: 100%; background: linear-gradient(to bottom, #f3f3f3, #eee, #f3f3f3); cursor: pointer; } footer div:nth-child(n+2) { border-left: solid 1px #ddd; }</style>...<body> <main></main> <footer> <div>1</div> <div>2</div> <div>3</div> </footer></body>弹性布局<style> * { padding: 0; margin: 0; } body { display: flex; flex-direction: column; height: 100vh; } main { border: solid 1px #ddd; background: #ddd; background-clip: content-box; margin-bottom: 5px; flex: 1; } footer { flex: 0; display: flex; justify-content: space-evenly; border-top: solid 1px #ddd; min-height: 50px; } footer div { flex: 1; text-align: center; line-height: 3em; background: linear-gradient(to bottom, #f3f3f3, #eee, #f3f3f3); cursor: pointer; } footer div:nth-child(n+2) { border-left: solid 1px #ddd; }</style>...<body> <main></main> <footer> <div>1</div> <div>2</div> <div>3</div> </footer></body>
flex布局
