延得2021-04-06 20:36:44 0 1 271
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>项目上的flex:属性</title> <style> * { box-sizing: border-box; } :root { font-size: 10px; } body { font: size 1.6rem; } /* flex 容器 */ .container { display: flex; height: 20rem; border: 1px solid #000; } /* flex项目样式（也就是子元素） */ .container > .item { /* padding: 1rem; */ /* width: 10rem; 方便测试缩放功能，这里推荐用100%不用10rem； */ width: 100%; background-color: lightcyan; border: 1px solid #000; /* 设置项目是否允许放大 1是允许 0 是不允许*/ /* flex-grow: 1; */ /* 设置项目是否允许收缩 */ flex-shrink: 1; /* 设置项目在主轴空间上的大小 */ /* flex-basis: 15rem; */ } /* flex 属性 */ </style> </head> <body> <div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> </div> </body></html>
查无此人 2021-04-07 11:24:001楼
代码检查了，可以缩放。你截图给我看下，或者在检测下，哪里的问题
赞 +0添加回复