你不知道的 flex 技巧
一、使用 Auto Margins 對齊
不需要給圖片使用任何的 flex，也不需要給父容器設置 space-between，只需要給 ‘ BUY-BUY-BUY‘ 按鈕設置 margin-left: auto 就可以了
動手試一下
二、min-width 防止文本溢出
溢出是因為 item 的 min-width 初始被設置為 auto ：即 item 的寬度不能比它裏面的內容的寬度小。重寫這個有問題的屬性，將 min-width: auto 改為 min-width: 0，給 flexbox 指明了對於這個條目可以比它裏面的內容更窄。
這樣就可以在條目裏面處理文本了。我建議包裹單詞。那麽你的 CSS 代碼就會是下面這個樣子：
.son-txt { min-width: 0; word-wrap: break-word; padding: 10px; }
動手試一下
三、flex: none 讓按鈕有固定的寬度
flex 屬性其實是 flex-grow，flex-shrink 和 flex-basis 的簡寫。
其實你只需要這三者的一個組合。
如果我想當空間不夠的時候條目可以被壓縮，但是不要伸展，那麽我們需要：flex: 0 1 auto 簡寫為 initial
如果我的條目需要盡可能地填滿空間，並且空間不夠時也可以被壓縮，那麽我們需要：flex: 1 1 auto 簡寫為 auto
.son-btn { margin-left: auto; align-self: center; padding: 10px 20px; /* 既不伸展也不壓縮 簡寫為：flex: 0 0 100px;*/ flex: none; width: 100px; }
動手試一下
四、margins 和 padding 不要使用 %
這並不僅僅是一個最佳實踐，它類似於爺爺說的話，去遵守就好了，不要問為什麽。
"開發者們在 flex 條目上使用 paddings 和 margins 時，應該避免使用百分比" — 愛你的，flexbox 細則。
動手試一下
五、align-items: baseline
如果我想讓我的 flex 條目垂直對齊，我總是使用 align-items: center。但是就像 vertical-align一樣，這樣當你的條目有不同的字體大小並且你希望它們基於 baselines 對齊的時，你需要設置 baseline 才能對齊的更完美。
align-self: baseline 也可以，或許更直觀。
動手試一下
六、秘密武器 Flex-basis
一旦 initial，auto 和 none 都不能滿足你的需求時，事情就有點復雜了。
如果你有 3 個 flex 條目，它們的 flex 值分別為 3，3 和 4。那麽當 flex-basis 為 0 的話它們就會忽略他們的內容，占據可用空間的 30%，30%，40%。
然而，如果你想要 flex 更友好但是有點不太可預測的話，使用 flex-basis: auto。這個會將你的 flex 的值設置得更合理，同時也會考慮到一些其他因素，然後為你給出相對合理的寬度。
看看這個很棒的示意圖。
動手試一下
PS：
一個很有用的瀏覽器 flexbox bugs 的清單
11 things I learned reading the flexbox spec
你不知道的 flex 技巧