小demo 左右固定 中间自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>左侧固定 右侧固定 中间自适应</title> <style> section { 60%; height: 150px; background: pink; display: flex; } section div:nth-child(1) { 150px; height: 150px; background: red; } section div:nth-child(2) { flex: 1; background: #686868; } section div:nth-child(3) { 150px; height: 150px; background: purple; } </style> </head> <body> <section> <div>1</div> <div>2</div> <div>3</div> </section> </body> </html>
小demo 一个父盒子里面三个盒子平均分
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>把父盒子平均三等份</title> <style> p { 600px; height: 500px; background: pink; display: flex; } /*只需要这一句 每个占一份*/ p span { flex: 1; } p span:nth-child(1) { background-color: #777; } p span:nth-child(2) { background-color: #888; } p span:nth-child(3) { background-color: #999; } </style> </head> <body> <p> <span>1</span> <span>2</span> <span>3</span> </p> </body> </html>
字元素都不需要设置宽高 直接平分了父亲的空间
