你不知道的 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 技巧