答:伸縮布局(Flexbox)是一種CSS3布局方式,它可以輕松實現頁面布局自適應。HTML中設置伸縮布局需要用到display屬性和flex屬性。
1. display屬性
line-flex,這樣該元素就成為了一個伸縮容器。
```tainer {
display: flex;
2. flex屬性
k和flex-basis。
- flex-grow:指定伸縮項目在伸縮容器中的分配比例,默認值為0,即不伸縮。k:指定伸縮項目在伸縮容器中的收縮比例,默認值為1,即會收縮。
- flex-basis:指定伸縮項目在伸縮容器中的初始大小,默認值為auto,即根據內容自適應大小。
``` {
flex: 1; /* 等價于 flex: 1 1 auto */
上述代碼將伸縮項目的flex-grow屬性設置為1,表示該項目可以在伸縮容器中占據剩余空間。
需要注意的是,伸縮布局的瀏覽器兼容性還不是很好,如果需要兼容舊版瀏覽器,可以使用flexbox的前綴版本或者使用其他布局方式。
總結:HTML中設置伸縮布局需要用到display屬性和flex屬性,通過設置伸縮容器和伸縮項目的伸縮能力,可以實現頁面布局自適應。