如何减少弹性盒行之间的间隙

时间:2018-10-23 15:02:47

标签: javascript html css css3 flexbox

我有一个伸缩框容器,其中包含两行,每行包含大小不同的项目,问题是我需要删除的行之间存在间隙 它不会增加项目的大小 这是我的代码

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	background-color: lightgray;
}
.container{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	


	width: 90%;
	margin:50px auto;
	background-color: white;
	padding: 5px;

}

.item{
	flex:1 250px;
	padding: 20px;
	background-color: steelblue;
	margin:5px ;
	border-radius: 5px;
	color: white;

}
<body>
	<div class="wrapper flex">
		<div class="container">
			<div class="item item-1">item1<br>
				 and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
			</div>
			<div class="item item-2">item2
				<br>
				 and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
			</div>
			<div class="item item-3">item3
					<br>
				 and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
			</div>
			<div class="item item-4">item4
					<br>
				 and a search for 'lorem ipsum' will uncover
			</div>
			<div class="item item-5">item1<br>
				 and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
			</div>
			<div class="item item-6">item2
				<br>
				 and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
			</div>
			<div class="item item-7">item3
					<br>
				 and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
			</div>
			<div class="item item-8">item4
					<br>
				 and a search for 'lorem ipsum' will uncover
			</div>
		</div>


</body>

查看整页内容,您将了解我 我需要解决此问题,才能在照片画廊项目中使用相同的逻辑 所有不同高度的照片都彼此叠放在一起 它们之间没有大的空隙

0 个答案:

没有答案