css中flex两列布局（一列自适应其他固定）

不随。

已于 2023-11-24 11:18:44 修改

阅读量1.3k

点赞数 16

文章标签： javascript css 前端

于 2023-11-24 11:15:58 首次发布

本文链接：https://blog.csdn.net/h1530687053/article/details/134594248

版权

作者在创建一个使用CSSflexbox的布局时遇到问题，图片设置100%宽度会撑开容器。解决办法是添加固定高度的div包裹图片。寻求更优解决方案。

摘要由CSDN通过智能技术生成

问题

最近写一个布局的时候，遇到一个问题。如下图的布局。在没有图片的时候布局是正常的，如果有图片且设置了width:100%;height: 100%; 则会出现图片将自适应布局撑开的情况。

我的解决方式是让图片不缩放，图片外层再添加一个div元素。形如下图：

大家有什么更好的方式麻烦告知我一下呗，多谢！

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.container {
				display: flex;

			}

			.flex1,
			.flex2 {
				display: flex;
				flex-direction: column;
				margin-top: -5px;
			}

			.fixed-div {
				height: 100px;
				width: 200px;
				background-color: #f1f1f1;
				margin-right: 10px;
				margin-top: 5px;
			}

			.flexible-div {
				flex: 1 1 100%;
				height: 100px;
				width: 200px;
				background-color: #00aaff;
				margin-right: 10px;
				margin-top: 5px;
			}
		</style>

		<div class="container">
			<div class="flex1">
				<div class="flexible-div"></div>
				<div class="fixed-div"></div>
				<div class="fixed-div"></div>
				<div class="fixed-div"></div>
				<div class="fixed-div"></div>

			</div>
			<div class="flex2">
				<div class="flexible-div">
					<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" />
				</div>
				<div class="fixed-div"></div>
				<div class="fixed-div"></div>
				<div class="fixed-div"></div>
				<div class="fixed-div"></div>

			</div>
		</div>
	</body>
</html>