Flex語法和常用滑鼠手勢

2022-07-31 18:09:12 字數 1592 閱讀 2788

1、display : flex/inline-flex ;(設定給氟元素)

flex : 將物件作為彈性伸縮盒顯示;

inline-flex : 將物件作為內聯塊級彈性伸縮顯示;

2、flex-direction (主軸排列方向)說明:順序指定子元素在父容器的位置;

row : 預設橫向排列;

row-reverse : 反轉橫向排列;

column : 縱向排列;

column-reverse : 反轉縱向排列;

3、justify-content (主軸對齊方式) 說明:內容對齊,屬性應用在單行容器上,把彈性項沿著彈性容器的主軸線對齊;

flex-start : 預設 頂端對齊;

flex-end : 末端對齊;

center : 具中對齊;

space-between : 兩端對齊,中間自動分配;

space-around : 自動分配距離;

4、flex-warp 說明:該屬性控制flex容器是單行或者多行,同時橫軸的方向決定了新行堆疊的方向;

nowrap : flex 容器為單行,子元素可能會溢位容器;

wrap : flex 容器多行,子元素溢位部分會被換行,子項內部發生斷行;

wrap-reverse :反轉wrap 排列;

5、align-items (側軸對齊方式)

flex-start : 從側軸(縱軸)起始邊緣排列;

flex-end : 相反方向;

center : 元素側軸居中(如果改行小於盒子元素,則向兩方向溢位相同長度;

baseline : 與flex-start 一樣,其他情況該值將於基線對齊;

strech : 預設值。專案被拉伸以適應容器;

6、align-content (行與行之間對齊方式)

flex-start : 沒有行間距;

flex-end :底對齊沒有行距;

center : 居中沒有行距;

space-between : 兩端對齊,中間自動分配;

space-around : 自動分配距離;

7、align-self (給子元素加)  注意:屬性可重寫靈活容器的align-items屬性;

auto :預設值;繼承父元素align-items屬性;如果沒有則為 stretch;

strtch : 元素拉伸以適應起容器;

center : 元素位於容器的中心;

flex-start : 元素位於容器的開頭;

flex-end : 元素位於容器的結尾;

8、flex三個屬性值

flex-grow : 定義專案放大比例,預設0 ,既存在剩餘空間也不放大;

flex-shrink:定義專案縮小比列,預設1,即空間不足則會同比列縮小,負值無效;

flex-basis : 專案長度;

cursor : crosshair 十字架、pointer 手型、move 移動、e-resize左右方向、ne-resize向右及向上移動、nw-resize向上及向左移動、n-resize向上、se-resize向下及右、se-resize向下及左、s-resize向下、w-resize向左、text文字、wait等待、help幫助

常用滑鼠手勢總結

cursor hand與 cursor pointer 的效果是一樣,都像手形游標。但用firefox瀏覽時才注意到使用cursor hand在firefox裡並被支援。cursor hand ie完全支援。但是在firefox是不支援的,沒有效果。cursor pointer 是css2.0的標準...

flex布局的常用語法

前一段時間寫我的個人部落格時,用到了flex布局這個神奇的東西,頓時驚為天人,還有這麼好用的東西,果斷上手操作一波,下面是我整理的一些常用語法,以後忘了的時候再來回顧一下,要是能幫助到其他的小夥伴那就再好不過了.先介紹一下flex flex 是flexible box 的縮寫,意為 彈性布局 用來為...

flex 滑鼠右鍵事件 和右鍵選單的實現

flex 滑鼠右鍵事件監聽事件的mouseevent.right click事件 比如對某個控制項a進行監控右鍵點選事件 a.addeventlistener mouseevent.right click,func 滑鼠的其他事件也可以監聽,具體見 其基本思路為 1,在flex中利用外部介面註冊乙個...