我子项目高度并不一至,我想的下一个项目紧靠上一个项目
flex 换行布局 且项目高度不一至 不要column 方式排列,这样排列不是我想要的!我要的是内容加载后从左到右这样排下去,因为这个内容最多20个 最少3 5个 如果 3 5个的时候用column排列左边,导致右边内容的 从内容上来显示不好看!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 600px;
height: auto;
border: 1px solid #dedede;
margin: 0 auto;
padding: 0;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
align-content: flex-start
}
.item {
width: 285px;
height: 200px;
background: darkgrey;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item" style="height: 300px;">2</div>
<div class="item" style="height: 280px;">3</div>
<div class="item">3</div>
<div class="item">3</div>
<div class="item">3</div>
</div>
</body>
</html>
你想要的是瀑布流布局吧