Introduction to the

Stretch, available, and fill-available are the same keywords with different names, allowing the size of the element to automatically fill the available space, just like the default size of the

element

meaning

  • Stretch refers to “elastic stretch”, which is the keyword defined in the latest specification, replacing the previous fill-available and available
  • Available indicates the available space. It is a keyword used by The Firefox browser and must be used with the -moz- private prefix
  • Fill -available refers to fill the available space. It is a keyword used by the WebKit browser and must be used with the -webkit-private prefix
.element {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
}
Copy the code

Usage scenarios

In the actual development, there are not many application scenarios. Only when the use of HTML tags is limited, we need to consider using the keyword “Stretch”. The column, such as button button element, wants to be 15px away from the left and right edges of the container, but it is not convenient to nest other tag elements outside. This is a good time to use the setretch keyword

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

Internet Explorer and Edge browsers do not support this. If you need to implement this effect, you can use the calc() function

Compatibility problems limit the application scenarios of the stretch keyword