flex佈局的盒子模型
flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)組成。
以容器(flex container)定義,有主軸(main axis)以及交叉軸(cross axis),主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end.交叉軸的開始位置叫做cross start,結束位置叫做cross end。
(注意:當佈局排列方式變化的時候,main axis跟cross axis的方向也會跟著變化,這一點非常重要)主軸(main axis)可以是水平方向,也可以是垂直方向,而交叉軸(cross axis)始終是與主軸垂直
display: flex | inline-flex(適用於父類容器元素上)
定義一個flex容器,內聯或者根據指定的值,來作用於下面的子類容器。
box:將物件作為彈性伸縮盒顯示。(伸縮盒最老版本2009)
flexbox:將物件作為彈性伸縮盒顯示。(伸縮盒過渡版本2011)
flex:將物件作為彈性伸縮盒顯示。(伸縮盒最新版本)
首先得指定元素是flex佈局 塊狀元素 -> display:flex 行內元素 -> display:inline-flex 例如: .box{ display:flex; }
flex-direction(適用於父類容器的元素上):
flex-direction: row | row-reverse | column | column-reverse
row(預設):主軸為水平方向,從左到右
row-reverse:主軸為水平方向.從右到左
column:主軸為垂直方向,從上到下
column-reverse:主軸為垂直方向,從下到上
flex-wrap(適用於父類容器上):伸縮盒物件的子元素超出父容器時是否換行
flex-wrap: nowrap | wrap | wrap-reverse
nowrap:當子元素溢位父容器時不換行。
wrap:當子元素溢位父容器時自動換行。
wrap-reverse:反轉 wrap 排列,(下一行位置與交叉軸位置相反)
flex-flow (適用於父類容器上) //flex-direction和flexwrap的符合寫法
flex-flow: <‘flex-direction’> || <‘flex-wrap’> [ flex-direction ]:定義彈性盒子元素的排列方向。 [ flex-wrap ]:定義彈性盒子元素溢位父容器時是否換行。
例如:flex-flow:row nowrap;
justify-content (適用於父類容器上):確定在主軸方向上的對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start:該行起始位置(預設值)
flex-end:該行結束位置
center:該行中央,空間不足,則超出空間
space-between:平均地分佈在行裡
space-around:平均地分佈在行裡,兩端保留子元素與子元素之間間距大小的一半。
space-evenly:均勻的排列每個元素,每個元素之間的距離相等
align-items(適用於父類容器上):確定在交叉軸上的對齊方式
align-items: flex-start | flex-end | center | baseline | stretch
flex-start:交叉軸的起始位置
flex-end:交叉軸的結束位置
center:在交叉軸居中
baseline:在基準線上保持對齊
stretch:如果條目的交叉軸尺寸的計算值是“auto”,則其實際使用的值會使得盒子在交叉軸方向上儘可能地佔滿。(設定高度後是不起作用的)
align-content (適用於父類容器上):用來處理交叉軸空白空間(對單行不起作用)
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start:行集中於容器的交叉軸起始位置
flex-end:行集中於容器的交叉軸結束位置
center:行集中於容器的中央
space-between:行在容器中均勻分佈。
space-around:行在容器中均勻分佈,兩端保留子元素與子元素之間間距大小的一半。
space-evenly:均勻的分佈在交叉軸中
stretch:伸展行來佔滿剩餘的空間。多餘的空間在行之間平均分配,使得每一行的交叉軸尺寸變大。
align-self (適用於子類容器上):
align-self: flex-start | flex-end | center | baseline | stretch
flex-start:交叉軸的起始位置
flex-end:交叉軸的結束位置
center:在交叉軸居中
baseline:在基準線上保持對齊
stretch:如果條目的交叉軸尺寸的計算值是“auto”,則其實際使用的值會使得盒子在交叉軸方向上儘可能地佔滿。(設定高度後是不起作用的)
當"align-self"的值為 auto 時,其計算值是父節點的屬性"align-items"的值。如果該節點沒有父節點,則計算值為"stretch"。
用來覆寫容器指定的對齊方式
order (適用於子元素):用來設定自容器的排列順序
用整數值來定義排列順序,數值小的排在前面。可以為負值。
flex:適用於子類容器:設定或檢索伸縮盒物件的子元素如何分配空間。
複合屬性。
如果縮寫flex:1, 則其計算值為:1 1 0%;none:none關鍵字的計算值為: 0 0 auto
flex:auto 1 1 auto; flex:2 100px; 2 1 100px;
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
[ flex-grow ]:定義彈性盒子元素的擴充套件比率。預設值:0(當有內容剩餘時,每個子容器按照這個比例擴充套件內容)
[ flex-shrink ]:定義彈性盒子元素的收縮比率。預設值:1(收縮比例,當有內容溢位時,這個屬性才會起作用)
[ flex-basic ]:定義彈性盒子元素的預設基準值。預設值:auto(擴充套件或收縮內容時,以這個值為基準)若為auto,則以width為基準。其餘以值為基準