背景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/reset.css"/> <style type="text/css"> .box{ width: 400px;height: 400px;background: bisque; margin: 50px auto;overflow: hidden; /*转成弹性盒子*/ display: -webkit-flex; display: flex; /*换行,默认交叉轴正向换行*/ flex-wrap: wrap; /*两端对齐，项目之间的间隔都相等*/ justify-content: space-between; /*两端对齐，项目之间的间隔都相等*/ align-content: space-between; } .zxw{ width: 120px;line-height: 50px; text-align: center;color: #fff; height: 50px; background: red; } </style> </head> <body> <!--设置弹性元素的扩展比率来分配剩余空间:--> <!--flex-grow: 0;未设置默认为0--> <ul class="box"> <li id="n1" class="zxw">zxw1</li> <li id="n2" class="zxw">zxw2</li> <li id="n3" class="zxw">zxw3</li> </body> </html>
弹性元素的扩展比率：是让如上演示的弹性元素来分配剩余的空间，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/reset.css"/> <style type="text/css"> .box{ width: 400px;height: 400px;background: bisque; margin: 50px auto;overflow: hidden; /*转成弹性盒子*/ display: -webkit-flex; display: flex; /*换行,默认交叉轴正向换行*/ flex-wrap: wrap; /*两端对齐，项目之间的间隔都相等*/ justify-content: space-between; /*两端对齐，项目之间的间隔都相等*/ align-content: space-between; } .zxw{ width: 120px;line-height: 50px; text-align: center;color: #fff; /*margin-top: 10px;*/ height: 50px; } #n1{ background: red;width: 50px; } #n2{ background: green;width: 70px; } #n3{ background: blue; width: 100px; } </style> </head> <body> <!--设置弹性元素的扩展比率来分配剩余空间:--> <!--flex-grow: 0;未设置默认为0--> <ul class="box"> <li id="n1" class="zxw">zxw1</li> <li id="n2" class="zxw">zxw2</li> <li id="n3" class="zxw">zxw3</li> </body> </html>
这一行弹性元素占了220个像素，还剩下空间180个像素，那怎样将多余的弹性空间分配给这三个弹性元素呢，那就要设置扩展比率属性（flex-grow）
设置弹性元素的扩展比率来分配剩余空间:
不设置flex-grow属性则flex-grow: 0;（未设置默认为0,）不参与分配剩余空间
这里的1 2 3指的是将剩余的空间（这里剩余180px）分成多少份，并分别占1，2，3份
如这里将剩余的空间分成6份，#n1占1份，#n2占2份，#n3占3份
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/reset.css"/> <style type="text/css"> .box{ width: 400px;height: 400px;background: bisque; margin: 50px auto;overflow: hidden; /*转成弹性盒子*/ display: -webkit-flex; display: flex; /*换行,默认交叉轴正向换行*/ flex-wrap: wrap; /*两端对齐，项目之间的间隔都相等*/ justify-content: space-between; /*两端对齐，项目之间的间隔都相等*/ align-content: space-between; } .zxw{ width: 120px;line-height: 50px; text-align: center;color: #fff; /*margin-top: 10px;*/ height: 50px; } #n1{ background: red;width: 50px; flex-grow: 1; } #n2{ background: green;width: 70px; flex-grow: 2; } #n3{ background: blue; width: 100px; flex-grow: 3; } </style> </head> <body> <!--设置弹性元素的扩展比率来分配剩余空间:--> <!--flex-grow: 0;未设置默认为0--> <ul class="box"> <li id="n1" class="zxw">zxw1</li> <li id="n2" class="zxw">zxw2</li> <li id="n3" class="zxw">zxw3</li> </body> </html>
