<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
</div>
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ... </head>
<body>
</body>
* {
box-sizing: border-box;
}
body {
}
.container {
width: 100%;
border: 5px solid #f44;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item {
margin: 5px;
border: 5px solid #44b;
/* 控制宽度 */
width: 30%;
/* 保持宽高比为1:1 */
aspect-ratio: 1 / 1;
}
预览
控制台