TEST Phone WebView 通過 post 載入 url,自定義請求 header,獲取或設定 cookie
flex佈局
1、什麼是flex佈局
Flex是Flexible Box的縮寫,意為”彈性佈局”,用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex佈局。
.box{
display: flex;
}(使用flex佈局)
2、基本概念
採用Flex佈局的元素,稱為Flex容器(flex container),簡稱”容器”。它的所有子元素自動成為容器成員,稱為Flex專案(flex item),簡稱”專案”。
容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;交叉軸的開始位置叫做cross start,結束位置叫做cross end。
3、容器的屬性
3.1 flex-direction屬性
flex-direction屬性決定主軸的方向(即專案的排列方向)。
row(預設值):主軸為水平方向,起點在左端。
row-reverse:主軸為水平方向,起點在右端。
column:主軸為垂直方向,起點在上沿。
column-reverse:主軸為垂直方向,起點在下沿。
3.2 flex-wrap屬性
預設情況下,專案都排在一條線(又稱”軸線”)上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
(1)nowrap(預設):不換行。
(2)wrap:換行,第一行在上方。
(3)wrap-reverse:換行,第一行在下方。
3.3 justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式。
flex-start(預設值):左對齊
flex-end:右對齊
center: 居中
space-between:兩端對齊,專案之間的間隔都相等。
space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。
3.4 align-items屬性
align-items屬性定義專案在交叉軸上如何對齊。
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
3.5 align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
多根軸線,指的就是多行
flex-start:與交叉軸的起點對齊。
flex-end:與交叉軸的終點對齊。
center:與交叉軸的中點對齊。
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈。
space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(預設值):軸線佔滿整個交叉軸。