简介

stretch、available、fill-available 这三个关键字虽然名称有所不同，但是都是一致的，让元素的尺寸自动填满可用空间，就如同<div>元素的默认尺寸表现

含义

• stretch 指“弹性拉伸”，是最新的规范中定义的关键字，替换之前的 fill-available和available
• available 指“可用空间”，是Firefox浏览器使用的关键字，需要配合 -moz- 私有前缀使用
• fill-available 指“填充可用空间”，是 webkit 浏览器使用的关键字，需要配合 -webkit- 私有前缀使用

.element {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
}

使用场景

实际开发的时候，使用场景并不多，只有当我们的HTML标签使用受限的时候，才需要考虑使用 stretch 关键字，列如 button 按钮元素，希望距离容器左右边缘各15px的间距，但是外部又不方便嵌套其他标签元素，此时非常适合使用 setretch 关键字

button {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    margin-left: 15px;
    margin-right: 15px;
}
<button type="button">asd</button>

IE浏览器和Edge浏览器不支持，如果需要实现该效果，可以是 calc() 函数

兼容性问题限制了 stretch 关键字的使用场景