CSS inline-size

154 阅读1分钟

定义:

inline-size一个逻辑属性,当书写模式为水平时,它定义元素的宽度;而当writing-mode垂直模式时,它定义元素的高度。 语法:

/* Length values */
inline-size: 250px;
inline-size: 5rem;


/* Percentage values */
inline-size: 75%;


/* Keyword values */
inline-size: auto;
inline-size: fit-content(5rem);
inline-size: max-content;
inline-size: min-content;


/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;

例如:

.box1 {
  inline-size: 150px; // 此时相当于width: 150px
}
.box2 {
  writing-mode: vertical-rl; // 书写方向垂直,且从右到左
  inline-size: 150px; // 此时相当于:height: 150px 
}

效果图如下:

DEMO:codepen.io/jianxiujiuc…

参考文章: css-tricks.com/almanac/pro…