使用flex自适应宽度展示




 

 

 


 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
	<style>
		.parent {
			width: 100%;
			background-color: black;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			padding-right: 15px;
			padding-top: 15px;
			box-sizing: border-box;
			overflow-y: auto;
		    overflow-x: hidden;
		}

		.child {
			box-sizing: border-box;
			background-color: white;
			flex: auto;
			height: 50px;
			border: 1px solid red;
			margin-left: 15px;
			margin-bottom: 15px;
			min-width: 100px;
		}
	</style>
</head>
<body>
 <div class="parent">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
 </div>
</body>
</html>

猜你喜欢

转载自zhousheng193.iteye.com/blog/2410114