flex子元素超過父元素寬度時,子元素寬度被壓縮

問題描述:

  在使用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)

解決方法:

  1. 需要在button元素中引入flex屬性,添加flex: 0 0 180px;
  2. 將button的width改爲min-width;

關於flex屬性可以參考:https://www.jianshu.com/p/17b1b445ecd4

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章