本系列文章将會對CSS的flex布局做一個簡單的介紹，希望讀者朋友們能夠對它的功能有一個整體的認知，在工作中可以自由的運用。
這是本系列文章的第一篇，主要介紹flex布局中元素的收縮和擴充。
如果要使用flex布局，那麼第一個使用到的CSS屬性一定是display: flex，使用它可以聲明出一個上下文。在這裡，它有一套獨有的元素渲染規則。
現在，我們在這個上下文裡加入一些元素。和上下文外面的規則不同，上下文内的元素會按照主軸方向(本篇文章中，主軸方向為從左到右)依次排列，即使這是一個塊級元素，例如div。
代碼示例：
内容1
内容2内容2
内容3内容3内容3
顯示效果：
上述效果是上下文内所有元素的總寬小于上下文寬的情況。通俗的說，就是上下文内的元素又小又少，上下文沒有被裝滿。那如果上下文裝不下所有元素會怎麼樣？
我現在把浏覽器視窗縮小，讓上下文容不下所有元素。
文字換行了，上下文是剛好被裝滿的狀态。
我一定要讓上下文溢出，是以決定給裡面的元素都加上width屬性，明确地指定寬度。
修改後的代碼：
内容1
内容2内容2
内容3内容3内容3
上下文還是剛剛被裝滿的狀态。而且，設定的寬度竟然失效了！！！
為什麼這樣？這是flex布局的特性，如果上下文内空間不足，就會讓上下文内元素按比例收縮，使上下文恰好被充滿。
那這種收縮是可控的嗎？答案是肯定的。
flex-shrink屬性可以控制子元素收縮的比例，它的預設值是 1，即 flex-shrink: 1，每個元素按照自己寬的比例收縮。比如 三個元素的寬分别為 100px，200px，300px，上下文的寬度為200px。超出的寬度為 100 + 200 + 300 - 200，即 400。這需要收縮的400px寬度由三個元素按照自身寬度的比例平分，每個元素分别收縮 100 / 600 * 400, 200 / 600 * 400，300 / 600 * 400，即66.66px，133.33px，200px。
示例代碼：
内容1
内容2内容2
内容3内容3内容3
如果你想要某個元素不收縮，可以為它設定 flex-shrink: 0。如果想要某個元素收縮的更多一些，可以為它設定 flex-shrink: 2，flex-shrink: 3 或者更多。
如果給每一個子元素都設定flex-shrink: 0，每一個元素都不想收縮，那麼上下文就溢出了。
内容1
内容2内容2
内容3内容3内容3
與收縮功能類似，我們也可以在上下文未填滿時，通過flex-grow擴充裡面的元素。flex-grow的預設值為0，即 flex-grow: 0，預設元素不做擴充。
與收縮功能不同的是，擴充的大小依據flex-grow屬性值計算，與元素本身的寬度無關。比如為每個元素設定flex-grow: 1，它們會平分多餘的空間，與自身的寬度無關。
内容1
内容2内容2
如果想要某個元素擴充的更多一些，可以為它設定 flex-grow: 2，flex-grow: 3 或者更多。
除上述外，還有一種被廣泛使用的伸縮規則，為元素設定flex屬性，它可以讓元素按照指定比例瓜分上下文内剩餘空間。
示例代碼：
内容1
内容2 内容3
上下文的寬為 400，第一個元素的寬通過width屬性指定為 100，剩餘 300的寬由剩餘2個元素按比例配置設定。第二個元素的寬為 300 * (1 / (1 +2))，即 100px，第三個元素的寬為 300 * (2 / ( 1 + 2 ))，即 200px。
下一篇文章将繼續介紹flex布局在元素排列上的規則。