使用弹性布局时，如何使弹性行宽相同
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css">
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
<style>
#container {
display:flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div id="container" >
</div>
<script>
class App {
constructor() {
document.addEventListener("DOMContentLoaded", () => {
this.init()
})
}
init() {
var container = document.querySelector("#container")
$(container).width()
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
for (var i = 0; i < 50; i++) {
let el = $(`<div/>`);
el.css("background-color", getRandomColor())
el.width(Math.floor(100 + Math.random() * 100))
el.css("height", "20vh")
container.appendChild(el[0])
}
}
}
new App()
</script>
</body>
</html>
它的右侧有不相同的填充，但我希望它就像谷歌图像搜索页面（所有行左侧和右侧填充都是相同的），如何做
3回答
-
守着星空守着你
只需添加到您的项目：flex-grow:1class App { constructor() { document.addEventListener("DOMContentLoaded", () => { this.init() }) } init() { var container = document.querySelector("#container") $(container).width() function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } for (var i = 0; i < 50; i++) { let el = $(`<div/>`); el.css("background-color", getRandomColor()) el.width(Math.floor(100 + Math.random() * 100)) container.appendChild(el[0]) } }}new App()#container { display: flex; flex-wrap: wrap;}#container>* { flex-grow: 1; height:25vh;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"><div id="container"></div>00 -
桃花长相依
#container { display: flex; flex-wrap: wrap; //////////////// justify-content: space-between; }00 -
胡子哥哥
您必须为 div 标签的宽度设置 flex-basis：#container div{ flex-grow: 0; flex-shrink: 1; flex-basis: 20% }然后在 js 中为宽度设置 100%： el.css("width", "100%")<!DOCTYPE html><html><head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <style> #container { display:flex; flex-wrap: wrap; } #container div{ flex-grow: 0; flex-shrink: 1; flex-basis: 20% } </style></head><body><div id="container" ></div><script> class App { constructor() { document.addEventListener("DOMContentLoaded", () => { this.init() }) } init() { var container = document.querySelector("#container") $(container).width() function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } for (var i = 0; i < 50; i++) { let el = $(`<div/>`); el.css("background-color", getRandomColor()) el.css("width", "100%") el.css("height", "20vh") container.appendChild(el[0]) } } } new App()</script></body></html>00
相关分类