flex知識點精煉

2022-09-08 18:54:07 字數 674 閱讀 6181

原址:

設定flex布局之後,子元素的float、clear、vertical align將失效。

任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局,webkit核心的瀏覽器,必須加上-webkit字首。

flex-wrap屬性預設的是不換行。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設是row nowrap。

align-items屬性的預設值是stretch:如果專案未設定高度或者為auto,將佔滿整個容器的高度。

(aligin-content的預設屬性也是stretch)

align-content屬性定義了多跟軸線的對其方式。如果專案只有一根軸線,該屬性不起作用。

order屬性定義專案的排列順序。數值越小排列越靠前預設為0。

flex-grow的屬性預設為0,flex-shrink的屬性預設為1。它們兩個都不能為負。

flex-shrink的值越大,減小的越厲害。如果值為0,表示不減小

flex屬性:flex屬性是flex-grow、flex-shrink、flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷鍵——auto(1 1 auto)none(0 0 auto)。建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因為瀏覽器會推算相關值。

flex布局知識點

flexbox 布局最合適小規模布局,而網格布局適合較大規模布局。float,clear,vertical align 在flex中不起作用。flex布局中,有兩類作用于父節點也子節點的樣式,大部分簡單的布局只要把父節點寫好了,子節點是沒有多大問題的。display flex 宣告布局方式 flex...

flex知識點歸納

flex基本用法是給父容器設定 display flex 參考 那麼它下面的所有子元素,自動成為flex的item項。flex flow是flex direction和flex wrap的簡寫。flex flow row row reverse column column reverse nowar...

彈性布局flex知識點

flex布局原理 通過給父盒子新增flex屬性來控制子盒子的位置和排列方式 常見父項屬性 flex direction row row reverse column column reverse flex wrap nowrap wrap wrap reverse flex flow flex di...