問題描述:
在使用flex佈局時,左邊的div寬度爲父元素的百分之80%,右邊button寬度固定,但是最終結果時div和button的實際寬度都被壓縮了。具體代碼如下:
<div class="parent">
<div class="sub"></div>
<button class="button">button</button>
</div>
.parent{
background: red;
display: flex;
height: 200px;
padding:100px 100px;
width: 500px;
}
.sub{
background: green;
width: 80%;
}
.button{
background: blue;
width: 180px;
}
問題原因:
當容器沒有足夠大的空間來存放所有的子元素時,子元素會按照一定的壓縮率被壓縮,這個壓縮率就是由flex-shrink來設置(flex-shrink默認值爲1)
解決方法:
- 需要在button元素中引入flex屬性,添加flex: 0 0 180px;
- 將button的width改爲min-width;
關於flex屬性可以參考:https://www.jianshu.com/p/17b1b445ecd4