Flex布局,精簡版筆記

2021-09-11 00:22:39 字數 1423 閱讀 8718

總是記不住flex的諸多屬性及作用,在此集中放一下,另標註了一些注意事項

比較常用的屬性大概是這樣:

.box
屬性詳解

display:flex;

display: -webkit-flex;

/* webkit 核心的瀏覽器,必須加上-webkit字首*/;

flex-direction: row | row-reverse | column | column-reverse;

/* 主軸方向:橫 | 橫右 | 豎 | 倒豎 */

flex-wrap: nowrap | wrap | wrap-reverse;

/* 換行:不換 | 換 | 換行(倒著來) */

flex-flow:row nowrap;

/* flex-direction屬性和flex-wrap屬性的縮寫*/;

justify-content: flex-start | flex-end | center | space-between | space-around;

/* 主軸對齊:起點 | 終點 | 中間 | 兩端 | 環繞*/

align-items: flex-start | flex-end | center | baseline | stretch(預設);

/* 交叉軸對齊:起點 | 終點 | 中間 | 基線 | 拉成它爸那麼長*/

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

/* 多行時兒子們的對齊:起點 | 終點 | 中間 | 兩端 | 環繞 | 拉兒子填空*/

比較常用的屬性大概是這樣:

.item
屬性詳解

order:0; 

/* 排列順序,數值越小,排列越靠前,預設為0 */

flex: 0 1 auto;

/* flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選 */

flex-grow: 0;

/* 放大比例,預設為0,0的時候不放大,一樣的時候等比放大 */

flex-shrink: 1;

/* 縮小比例,預設為1,0的時候不縮小,負值無效 */

flex-basis:auto;

/* 兒子大小 */

align-self: auto | flex-start | flex-end | center | baseline | stretch;

/* 單個兒子自己的對齊方式 */

java基礎筆記精簡版3

回顧 識別符號 用來定義類名,方法名,變數名的字段 class demo 命名規則 由字母,數字,下劃線,不能以數字開頭 區分大小寫 不能使用關鍵字 長度無限制 命名習慣 見名知義 駝峰式命名 類名首字母大寫 長度15個字元 變數 特點 值是可以改變的 可以重複使用的區域 格式 型別 名字 賦值 i...

AsyncTask原理精簡版

asynctask有三個主要的方法 onpreexecute doinbackground string.params onpostexecute 建立asynctask物件需要重寫乙個類繼承asynctask,因為asynctask本身是抽象類 new asynctask execute para...

Sql優化精簡版

1.select語句中避免使用 盡量應該根據業務需求按欄位進行查詢 2.刪除重覆記錄 delete from tble tb where tb.id select min id from tble ble where tb.name ble.name 3.用 替換 4.盡量多使用commit 如對大...