CSS - fit-content 属性_CSS 菜鸟教程

CSS 中的 fit-content 属性用于根据容器的内容指定容器的大小，最高可达最大大小。它通常与 min-content 和 max-content 值结合使用，以创建灵活且响应迅速的布局。

在实践中，这意味着框架利用可用空间，确保它永远不会超过 max-content 的大小。
在布局框中与指定的宽度、高度、最小宽度、最小宽度、最大宽度和最大高度的指定维度一起使用时，最小和最大大小是指内容的尺寸。

如果希望容器根据其内容扩展或收缩容器，但仍具有上限以防止其变得太宽，则此属性特别有用。

语法

width: fit-content;
block-size: fit-content;

CSS fit-content（） - 盒子大小

以后

在给出的示例中，box 类的 width 属性的 fit-content 函数根据内容动态调整框的宽度。
它确保盒子适应内容物，允许盒子变大或缩小，同时保持包含内容物所需的最小宽度。

<html>
<head>
<style>
	 	body {
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	 	 margin: 0;
	 	}

	 	.box {
	 	 	 width: fit-content;
	 	 	 padding: 20px;
	 	 	 background-color: #3498db;
	 	 	 border:2px solid black;
	 	 	 color: white;
	 	 	 font-size: 18px;
	 	 	 margin-bottom:5px;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 Small content!
	 	</div>
	 	<div class="box">
	 	 	 Some more content shows how the box expands!
	 	</div>
	 	<div class="box">
	 	 	Lot of content shows how the box expands even more !Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

<< CSS @font-face - unicode-range CSS - max-content 属性 >>