使用flex自适应宽度展示

最新推荐文章于 2024-05-05 05:25:12 发布

zhousheng193

最新推荐文章于 2024-05-05 05:25:12 发布

阅读量3.1k

点赞数

分类专栏： web前端文章标签： flex 宽度自适应

本文链接：https://blog.csdn.net/zhousheng193/article/details/84915977

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhousheng193

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用flex自适应宽度展示

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;
复制链接

扫一扫