CSS - max-content 属性

内容的固有最大宽度或高度由大小调整关键字 max-content 表示。这意味着，它将元素的宽度设置为元素溢出容器之前的最大宽度。此属性将优先于任何其他宽度属性，并将自行调整以适应其容器。

在需要内容的最大宽度来确定框的大小的情况下，使用 max-content 关键字是最佳的。

语法


/* Used as a length */
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/* used in grid */
grid-template-columns: 100px 1fr max-content;

CSS max-content -盒子大小

以下示例演示了如何使用 max-content 来设置框的大小：


<html>
<head>
<style>
	 	#container {
	 	 	 background-color: lightblue;
	 	 	 padding: 10px;
	 	 	 width: 250px;
	 	}

	 	.item {
	 	 	 width: max-content;
	 	 	 background-color: pink;
	 	 	 padding: 5px;
	 	 	 margin-bottom: 1em;
	 	}
</style>
</head>
<body>
	 	<h2>max-content - Example</h2>
	 	<div id="container">
	 	 	 <div class="item">Item with smaller content</div>
	 	 	 <div class="item">
	 	 	 	 	Item with more content in it which will overflow the fixed width of the container.
	 	 	 </div>
	 	 	 </div>
</body>
</html>

CSS max-content - 调整网格列的大小

以下示例演示了如何使用 max-content 来调整网格列的大小：


<html>
<head>
<style>
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-columns: max-content max-content 1fr;
	 	 	 grid-gap: 5px;
	 	 	 height: 200px;
	 	 	 width: 100%;
	 	 	 background-color: pink;
	 	 	 padding: 10px;
	 	 	 border: 2px solid black;
	 	}

	 	#container > div {
	 	 	 background-color: lightskyblue;
	 	 	 padding: 5px;
	 	 	 border: 2px solid black;
	 	}
</style>
</head>
<body>
	 	<h2>max-content - Sizing grid columns</h2>
	 	<div id="container">
	 	 	 <div>Item</div>
	 	 	 <div>Column with flexible text and more than the other two columns.</div>
	 	 	 <div>Item with more text in it.</div>
	 	</div> 	 	
</body>
</html>

CSS max-content - 与图像一起使用

以下示例演示了如何将 max-content 与图像一起使用。


<html>	
<head>	
<style>	
	 	.card{	
	 	 	 width: max-content;	
	 	 	 border: 1px solid black;	
	 	}	
</style>	
</head>	
<body>	
	 	<h1>max-content</h1>	
	 	<div class="card">	
	 	 	 <img src= "images/logo.png" alt="logo" />	
	 	 	 <h1>Qikepu.Com CSS Reference</h1>	
	 	</div>	
</body>	
</html>

打印本页