CSS - min-inline-size 属性

CSS min-inline-size 属性指定元素块的最小水平或垂直大小，由其写入模式确定，并且等效于基于写入模式值的 min-height 和 min-width。

可能的值

min-inline-size 属性接受与 min-height 和 min-width 相同的值。

适用于

语法

<length> 值


min-inline-size: 100px;
min-inline-size: 5em;

<percentage> 值


min-inline-size: 10%;

Keyword 值


min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content;
min-inline-size: fit-content(20em);

min-inline-size 属性分别设置水平写入模式的最小宽度和垂直写入模式的最小高度。作为伴生属性，min-block-size 定义了另一个维度。

CSS min-inline-size - <length> 值

以下示例演示了 min-inline-size： 200px 属性将内联元素的最小宽度设置为 200px −


<html>
<head>
<style>
	 	.box {
	 	 	 background-color: greenyellow;
	 	 	 border: 3px solid red;
	 	 	 display: inline-block;
	 	 	 min-inline-size: 200px;
	 	}
</style>
</head>
<body>
	 	<p class="box">CSS min-inline-size</p>
</body>
</html>

CSS min-inline-size - <percentage> 值

以下示例演示了 min-inline-size： 30% 属性将内联元素的最小宽度设置为 30% −


<html>
<head>
<style>
	 	.box {
	 	 	 background-color: greenyellow;
	 	 	 border: 3px solid red;
	 	 	 display: inline-block;
	 	 	 min-inline-size: 30%;
	 	}
</style>
</head>
<body>
	 	<p class="box">CSS min-inline-size</p>
</body>
</html>

CSS min-inline-size - 最大内容值

以下示例演示了 min-inline-size： max-content 属性允许内联元素水平扩展以适应其内容 -


<html>
<head>
<style>
	 	.box {
	 	 	 background-color: greenyellow;
	 	 	 border: 3px solid red;
	 	 	 display: inline-block;
	 	 	 min-inline-size: max-content;
	 	}
</style>
</head>
<body>
	 	<p class="box">CSS min-inline-size</p>
</body>
</html>

CSS min-inline-size - 带有垂直文本

以下示例演示了 max-inline-size 属性，该属性具有在垂直方向上显示文本的写作模式 -


<html>
<head>
<style>
	 	div {
	 	 	 background-color: greenyellow;
	 	 	 border: 2px solid blue;
	 	 	 margin: 10px;
	 	 	 padding: 5px;
	 	 	 min-inline-size: 150px;
	 	 	 writing-mode: vertical-rl;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h3>CSS min-inline-size with writing-mode: vertical-rl.</h3>
	 	</div>
</body>
</html>

打印本页