Flex Panels Image Gallery

demo

重點

1. 將.panels 設置為display:flex
2. 設定每個子panel 的flex 值為1
3. 針對每個子panel，設為display:flex，設置其flex 主軸方向
4. 控制.panle 的子元素< p> 中的文字垂直、水平居中（單獨看每個panel，
5. 其中的文字也可以用flex 的思路來使其三等分後居中） 設置為display:flex
6. 設置flex 值設置其子元素的佈局方式：垂直水平居中（沿主軸、側軸居中） 設定點擊圖片後文字移動的樣式設定點擊圖片展開後的圖片的flex 值

includes()

Safari transitionend event.propertyName === flex */

Chrome + FF transitionend event.propertyName === flex-grow */
由於各個瀏覽器有不同對應 事件 所以我們使用includes()來找到flex

flex屬性
css選擇器
A Complete Guide to Flexbox
物件屬性
e.propertName
includes 傳回布林值，指出字串物件中是否包含傳入的字串