在使用flex進行佈局的時候,flex專案(flex item)內容是一張圖片的時候，會出現一個挺奇怪的問題，就是圖片的高度和flex item的高度不一致，會出現一定的間隔。

首先，如果flex item裡的是文字的時候，會發現內容和flex item的高度是一致的。

但是，如果flex item裡面的是圖片，圖片的高度和flex item的高度是不一致的。如果我想多行圖片上下之間沒有間隙，這個問題就難搞，出現下面圖片這種情況。

這個時候，有兩種解決方法，一種是圖片適應flex item。一開始我已經在圖片添加了width:100%，可以再新增height:100%讓圖片高度填滿flex item。但是這樣圖片就變形了。然後可以通過object-fit:cover來讓圖片保持尺寸，但圖片也是有一部分是超出，顯示不全了。後來發現，圖片適應flex item的方法適合正方形的圖片，正方形的圖片寬高設定100%時是可以完全填滿flex item的，而且也不會出現變形的情況。

另一種方法是flex item適應圖片。如果使用的圖片是長方形的，使用第一種方法就會出現圖片變形的情況。所以需要flex item使用圖片的高度，只需要在flex item新增display:flex;就可以了。這樣flex item就會與圖片的高度一致了。