0

语境

  • 对使用clamp() 来调节
    特定值之间的文本内容的宽度很感兴趣。

  • 在 flex 项目内部时，当达到最小宽度时，它不会将相邻内容向下碰撞到下一行。内容
    重叠。
  • 请参阅下面的 codepen 中的演示。

演示：https ://codepen.io/gabrimo/pen/LYxeMvR

容器和弹性项目

.container {
    display: flex;
    flex-wrap: row;
}
.flex-items {
    flex: 0 1 50%;
}

三个测试 - 弹性项目中的段落

当容器宽度变窄时，只有下面的 p3 会将相邻的 flex 项碰撞到下一行。

.p1 {
    width: clamp( 20em, 100% , 40em );
}
.p1 {
    width: max( 20em, min( 100%, 40em ));
}
.p1 {
    min-width: 20em; / or width: 20em;
}

该规范没有详细说明夹具的工作原理。为什么在 flex 方案中，clamp 会有这种行为？

4

0 回答 0