就是flex布局上竖直方向如何布局，清除缝隙
就是我采用的flex布局，想让竖直方向div盒子直接没有缝隙
div1 和 div3 的宽度是相同的，但是就是想让div3与div1在竖直方向没有间隙。
不用 margin-top: 和 tranformY，其他还有什么方便的方法调整吗
是要实现这种效果么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h2 {
margin:0px;
}
.masonry {
width: 1440px;
margin: 20px auto;
columns: 2;
column-gap: 30px;
}
.item {
width: 100%;
break-inside: avoid;
margin-bottom: 30px;
background-color:#d2ecff;
padding:10px;
}
</style>
</head>
<body>
<div class="masonry">
<div class="item">
<h2>Title div1</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?
</p>
</div>
<div class="item">
<h2>Title div2</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?
</p>
</div>
<div class="item">
<h2>Title div3</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?
</p>
</div>
<div class="item">
<h2>Title div4</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?
</p>
</div>
<div class="item">
<h2>Title div5</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?
</p>
</div>
</div>
</body>
</html>
显示效果
可以在小盒子外边加一个div,左右各一个
像这样左右各用一个 flex-direction: column; 的 div 包住
<html>
<body>
<div id="main" style="display: flex; border: 1px solid; padding: 50px;">
<div id="left" style="display: flex; flex-direction: column; border: 1px solid; padding: 50px; margin: 50px;">
<div id="div1" style="border: 1px solid; padding: 50px;"></div>
<div id="div3" style="border: 1px solid; padding: 50px;"></div>
</div>
<div id="right" style="display: flex; flex-direction: column; border: 1px solid; padding: 50px; margin: 50px;">
<div id="div2" style="border: 1px solid; padding: 50px; height: 100px;"></div>
<div id="div4" style="border: 1px solid; padding: 50px;"></div>
</div>
</div>
</body>
</html>
是想实现瀑布流吗？纯css可以使用columns 属性简单实现，有用请采纳~
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content
{
margin: 0 auto;
width: 200px;
padding: 10px;
column-count: 2;
background-color: #1E83D3;
}
.item {
width: 95px;
}
</style>
</head>
<body>
<div class="content">
1
<img class="item" style="height: 80px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-53568b02c0f657eb922fd364168c13c0_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635929417&t=2a39621d0a1c63d576d0d74dad8e9013" >
2
<img class="item" style="height: 60px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-53568b02c0f657eb922fd364168c13c0_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635929417&t=2a39621d0a1c63d576d0d74dad8e9013" >
3
<img class="item" style="height: 170px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-53568b02c0f657eb922fd364168c13c0_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635929417&t=2a39621d0a1c63d576d0d74dad8e9013" >
4
<img class="item" style="height: 130px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-53568b02c0f657eb922fd364168c13c0_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635929417&t=2a39621d0a1c63d576d0d74dad8e9013" >
5
<img class="item" style="height: 170px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-53568b02c0f657eb922fd364168c13c0_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635929417&t=2a39621d0a1c63d576d0d74dad8e9013" >
</div>
</body>