CSS flex 布局 一些基本屬性應用

box-orient 、box-pack、box-align、box-direction、box-lines

box-orient：horizontal | vertical | inline-axis | block-axis

預設值：horizontal
適用於：伸縮盒容器
繼承性：無
動畫性：否
計算值：指定值

vertical

inline-axis

block-axis

box-pack：start | center | end | justify

預設值：start
適用於：伸縮盒容器
繼承性：無
動畫性：否
計算值：指定值
取值：start：
設定伸縮盒物件的子元素從開始位置對齊（大部分情況等同於左對齊，受）
center：
設定伸縮盒物件的子元素居中對齊
end：
設定伸縮盒物件的子元素從結束位置對齊（大部分情況等同於右對齊）
justify：
設定或伸縮盒物件的子元素兩端對齊

center

endjustify

box-align：start | end | center | baseline | stretch

預設值：stretch
適用於：伸縮盒容器
繼承性：無
動畫性：否
計算值：指定值
取值：start：
設定伸縮盒物件的子元素從開始位置對齊
center：
設定伸縮盒物件的子元素居中對齊
end：
設定伸縮盒物件的子元素從結束位置對齊
baseline：
設定伸縮盒物件的子元素基線對齊
stretch：
設定伸縮盒物件的子元素自適應父元素尺寸
說明：設定或檢索伸縮盒物件的子元素的對齊方式。檢視其兄弟屬性box-pack，兩者的效果正好（相反）互補
效果等同於過渡版本的flex-align屬性和新版本的align-items屬性；
box-align的對齊方式受box-orient影響；
預設情況下（即box-orient設定為horizontal）start和end所呈現的效果等同於頂部對齊和底部對齊；
當box-orient設定為vertical時，start和end所呈現的效果等同於左對齊和右對齊；
對應的指令碼特性為boxalign。

start

center

endbaseline

box-direction：normal | reverse

預設值：normal
適用於：伸縮盒容器
繼承性：無
動畫性：否
計算值：指定值
取值：normal：
設定伸縮盒物件的子元素按正常順序排列
reverse：
反轉伸縮盒物件的子元素的排列順序
說明：設定或檢索伸縮盒物件的子元素的排列順序是否反轉。
可以通過box-orient:horizontal + box-direction:normal 達到新版本 flex-direction:row 的效果；
可以通過box-orient:horizontal + box-direction:reverse 達到新版本 flex-direction:row-reverse 的效果；
可以通過box-orient:vertical + box-direction:normal 達到新版本 flex-direction:column 的效果；
可以通過box-orient:horizontal + box-direction:reverse 達到新版本 flex-direction:column-reverse 的效果；
firefox設定box-direction為reverse時，在將元素的排列順序反轉的同時也將元素的對齊方式逆轉了；safari和chrome則只是反轉元素排列順序
對應的指令碼特性為boxdirection。

reverse

box-lines：single | multiple

預設值：single
適用於：伸縮盒容器
繼承性：無
動畫性：否
計算值：指定值
取值：single：
伸縮盒物件的子元素只在一行內顯示
multiple：
伸縮盒物件的子元素超出父元素的空間時換行顯示
說明：設定或檢索伸縮盒物件的子元素是否可以換行顯示。
效果類似於過渡版本和新版本的flex-wrap屬性；
對應的指令碼特性為boxlines。

multiple

box-flex-group：

預設值：1
適用於：伸縮盒子元素
繼承性：無
動畫性：否
計算值：指定值
取值：：
用整數值來定義伸縮盒物件的子元素所在的組。
說明：設定或檢索伸縮盒物件的子元素的所屬組。
動態給數值較大的組分配其內容所需的實際空間（如無內容、padding、border則不佔空間），剩餘空間則均分給數值最小的那個組（可能有1個或多個元素）
對應的指令碼特性為boxflexgroup。

box-ordinal-group：

預設值：1
適用於：伸縮盒子元素
繼承性：無
動畫性：否
計算值：指定值
取值：：
用整數值來定義伸縮盒物件的子元素顯示順序。
說明：設定或檢索伸縮盒物件的子元素的顯示順序。
效果等同於過渡版本的flex-order屬性和新版本的order屬性；
數值較低的元素顯示在數值較高的元素前面；
相同數值的元素，它們的顯示順序取決於它們的**順序；
對應的指令碼特性為boxordinalgroup。

3

SlidingMenu的一些基本屬性

slidingmenu 常用屬性介紹 menu.setmode slidingmenu.left 設定左滑選單 menu.settouchmodeabove slidingmenu.touchmode fullscreen 設定滑動的螢幕範圍，該設定為全屏區域都可以滑動 menu.setshadow...

css的一些基本屬性

css屬性的名稱是不會改變的，能改變的只有屬性的取值。width 寬度 height 高度 color 字型顏色 background color 背景顏色 text align 字型格式 居中，靠左，靠右 line height 字型上下 靠上，靠下，垂直居中 margin 設定所有外邊距屬性。該...

flex初識 一 基本屬性

flex direction屬性 決定主軸的方向 即專案的排列方向 flex wrap屬性 規定如果一條軸線排不下，如何換行 flex flow屬性 是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowrap justify content屬性 定義了專案在主...