Flex學習記錄

2021-10-09 10:57:17 字數 1601 閱讀 5521

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 第二種 實現動態控制 ...