當指定view為flex布局后，給子元素定義width是不起效果的。 原因：定義為flex布局元素的子元素，自動獲得了flex-shrink的屬性，這個屬性是什么意思呢？就是告訴子元素當父元素寬度不夠用時，自己調整自己所占的寬度比，這個flex-shrink設置為1時，表示所有子元素大家同時縮小 ...

...

lex布局非常好用，但在開發過程中可能會碰到的一些坑 1、內容超出容器大致情況是：在一個設置了display:flex布局的大容器A中並排放置兩個子容器，並且子容器設置flex:1，子容器中都有一個元素包含一段文本，這段文本設置了不換行並且顯示省略號的樣式，當文本過長的時候，子容器會被撐開 ...

注：今天在用swiper.js做商品輪播圖的時候，遇到了在使用flexbox的前提下，子元素設置flex:1;所有子元素被擠在一期的現象（未執行到swipe）； 原因竟然是因為沒有設置：flex-shrink屬性。 flex-shrink：<number> 默認值 ...

問題 面試題：你能說說 flex-shrink 么？ 我們所知 flex 語法如下 並且可以有一些縮寫 其中 flex-grow 比較好理解，但是 flex-shrink 關注的就比較少了，正好筆者面試時被問到，一時間想不起來，就查一查並做個筆記 分析 先看一段代碼，摘錄自 ...

設置了固定寬高的圖片被壓縮 通常實現如下的效果，是把外層容器設置為display:flex，容器中圖片設置固定寬高度，右邊元素設置為flex:1，但當右邊元素寬度超出剩余空間的時候，圖片會被擠壓，變成橢圓形。 這是因為在flex容器中，當空間不夠的時候，flex-shrink不為0的元素 ...

flex-shrink 屬性。 使用之后，如果 flex 容器太小，則子元素會自動縮小。 當容器的寬度小於里面所有子元素的寬度之和時，所有子元素都會自動壓縮。 子元素的 flex-shrink 接受數值作為屬性值。 數值越大，則該元素與其他元素相比會被壓縮得更厲害。 比如，一個項目 ...

一、背景 彈性布局使用了很久了，一直停留在基本的用法，比如橫向布局，豎向布局，垂直居中，水平居中，着實非常好用，當然，超低版本安卓有一些兼容性問題，但是總會出現一些奇奇怪怪的問題，比如橫向排列的時候，其中的一個icon 元素會被截斷，因為沒有設固定寬度，之前是通過設定min-width ...