h5c3 part6 flex

1. animation: name duration delay timing-function count forwards

@keyframes name {
0% === from{
}
100% === to{

}
}

沒有延遲
animation-fill-mode: forwards 0%動畫不會立即執行, 結束時會停留在結束狀態
backwards 0%動畫會立即執行, 結束時不會停留在結束狀態
both 0%動畫會立刻執行, 結束時會停留在結束狀態

2. 彈性布局

1)開啟彈性布局: 給父盒子 display: flex(使每一個子元素編=變成伸縮項)

設置彈性布局屬性: 給父盒子

2) (主軸方向的對齊方式)justify-content: flex-start/flex-end/center(從哪里開始,子元素之間沒有距離)

space-around(將多余的寬度平均分配給每一個子盒子)

space-between(間隔在兩邊)

(側軸方向的對齊方式)align-items: flex-start/flex-end/center
stretch 拉伸
base 基線對齊
(給單個子元素設置) self-align:

問題:子元素成為伸縮盒子之后,有一個問題是: 當子元素跨度大于父元素時, 子元素會平均縮放,直至能夠同行顯示,
這種情況下, 子盒子自身設置的寬度都是無效的,所有需要flex-flow屬性來讓它換行

3) (換行)flex-flow : 實質是flex-wrap 和 flex-direction的屬性結合
flex-wrap: 控制是否換行, 默認不換行
wrap === 換行
nowrap === 不換行
wrap-reverse === 默認從上都下, 設置之后, 從下往上

flex-direction: 默認是水平方向row
row 主軸方向為x軸, 副軸為y軸
column 垂直方向(當子元素高度和大于父元素高度時, 換列顯示)
column-reverse; 垂直排列方向, 從下往上

4)可以聯合寫: flex-flow: wrap column; (實際應用分開寫)

5)flex 是 flex-gorw flex-shrink 的聯合屬性

　　flex-grow:1; 默認值是0 設置給子元素 每個子元素設置的值不同,根據比例放大

　　flex-shrink: 默認值是1 (所以如果設置為1,那么和其他盒子寬度還是一樣) 按比例縮小

　　flex:1; 占父盒子剩余空間;