flex-direction 決定主軸的方向
row(預設值)
row-reverse
column
column-reverse
justify-content 決定flex-items在主軸方向的對齊方式
flex-start(預設值)
center
flex-end
space-between 兩端對齊
space-around 兩端的距離是中間間距的一半
space-evenly 所有等分
align-items 決定flex-items在交叉軸方向的對齊方式
normal(預設值) 和stretch效果一樣
stretch 當flex items在交叉軸上沒有高度時,會自動拉伸
flex-start
center
flex-end
baseline 與基準線對齊
flex-wrap 決定flex-container是單行還是多行
nowrap(預設值) 單行、不換行
wrap 多行、換行
wrap-reverse 多行、交叉軸start和end相反
flex-flow 是flex-direction和flex-wrap的縮寫
align-content 決定多行的時候在交叉軸的對齊方式,用法和justify-content相似
stretch(預設值) 沒有高度時,自動拉伸
flex-start
flex-end
center
space-between
space-around
space-evenly
order 決定排列順序,值越小越排在前面,預設值為0
align-self: flex items可以通過align-self來覆蓋flex container中align-items的設定
auto 遵從flex container中align-items的設定
stretch 當flex items在交叉軸上沒有高度時,會自動拉伸
flex-start
center
flex-end
baseline 與基準線對齊
flex-grow: 當所有的flex items無法填滿父容器的寬度時,通過flex-grow來分配需要拉伸的大小
大家的值相等時,平分剩下的寬度,總和大於1時,按比例分配,小於1時,相乘得到寬度
flex-shrink: 當所有的flex items超過父容器的寬度時,通過flex-grow來分配需要收縮的大小
大家的值相等時,平均收縮多餘的寬度,總和大於1時,按比例分配,小於1時,相乘得到寬度
flex: flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。
flex布局學習記錄
推薦阮一峰寫的flex布局部落格,這裡我只是說下自己的學習記錄.flex布局可以實現響應式布局.相容性 實現flex布局,要有父容器和子元素.將父容器設定為display flex.父容器設定為display flex之後,它的子元素的float,clear,vertical align屬性將失效。...
Flex框架 Robotlegs學習記錄
最近在用flex4.5開發,學習了robotlegs框架,記錄一下 robotlegs框架原理圖 大體流程 this.mediatormap.mapview userlogin,userloginmediator 對映登入mediator,對映之後,userlogin.mxml元件和userlogi...
flex學習記錄 按鈕隱藏控制
button按鈕隱藏控制通過visible屬性實現,visible屬性取值有兩種 true false 以下是幾種隱藏控制是實現 第一種 直接設定visible屬性 1 55 height 25 label 登入 click loginsystem visible false 第二種 實現動態控制 ...