问题

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

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

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

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

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

代码

<!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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.

效果

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