【CSS】使用 Flex 後圖片受到擠壓?快試試 flex-shrink


Posted by Jianna on 2021-09-17

事情是這樣子的,前陣子在實作留言板的時候,遇到了以下問題:

使用 Flex 進行排版後,一旦留言字數多,大頭貼便很明顯地遭到擠壓,所幸上網爬文後很快的找到解決方法。

flex-shrink

flex-shrink 默認值是 1,若空間不足,元素將會自行縮小(壓縮)。
而當 flex-shrink 設置為 0,則代表空間不足時不壓縮

flex-shrink: 0;

如此一來,大頭貼就依照原先構想的樣子來顯示了,不會再因為文字過多而受到擠壓。

注意事項

display: flex 是設置在外層元素(元素),而 flex-shrink 則是與 flex 搭配使用,設置在子元素上。

參考資料

Flex 布局 元素被挤压的问题


#css #flex #flex-shrink







Related Posts

程式導師計畫 4th / 第十週複習整理心得

程式導師計畫 4th / 第十週複習整理心得

[Day05]: Docker Network

[Day05]: Docker Network

來學 React 吧之二_React 重要概念 useEffect

來學 React 吧之二_React 重要概念 useEffect


Comments