Css 简明教程

CSS - min-inline-size Property

CSS min-inline-size 属性指定元素块的最小水平或垂直大小，由其书写模式决定，根据书写模式的值，可相当于 min-height 和 min-width 。

Possible Values

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

Applies To

与 width 和 height 相同。

Syntax

<length> Values

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

<percentage> Values

min-inline-size: 10%;

Keyword Values

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> Value

以下示例展示了 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> Value

以下示例展示了 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 - max-content Value

以下示例展示了 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 - With Vertical Text

以下示例展示了包含 writing-modes 的 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>