Flex彈性和模型

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幫助

轉載于:https://www.cnblogs.com/yuzhongyu/p/10638988.html

總結

以上是生活随笔為你收集整理的Flex语法和常用鼠标手势的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。