---
# System prepended metadata

title: FlexBox
tags: [css, Flex-Box]

---

###### tags: `css` `Flex-Box`
# FlexBox
## Flex會自動根據內容物延伸高度，所以有時候圖片會變形跟著拉長？
範例：
![](https://i.imgur.com/arOlL6Q.jpg)


解決方法：
1.在img加入`align-self: start;`,針對flex裡的物件在交錯軸線的位置。
2.在img加入 `height: 100%;`

正確畫面：
![](https://i.imgur.com/jn7J63r.jpg)


參考：
[Why does flexbox stretch my image rather than retaining aspect ratio?](https://stackoverflow.com/questions/37609642/why-does-flexbox-stretch-my-image-rather-than-retaining-aspect-ratio)
[align-self 屬性介紹](https://w3c.hexschool.com/flexbox/c3847835)



