flex佈局-學習

今天,上網找了下各類flex的博文學習了一番,資料以下:
阮一峯的網絡日誌
Dive into Flexbox
2009年,W3C提出了---Flex佈局,特色是

• 簡便

• 完整

• 響應式

兼容性以下
查詢連接

介紹

Flex(Flexible Box),意思爲"彈性佈局"
任何一容器均可以指定爲Flex佈局,甚至行內元素也能夠

.box{
    display:flex;
}
.box{
    display:inline-flex;
}

可是因爲支持的狀況各不相同,咱們仍是須要對屬性作兼容性處理如加上-webkit-前綴等.

失效特性

• float

• clear

• vertical-align

理解

容器採用flex佈局後,就被稱爲flex容器(flex container),子元素被稱爲容器成員,爲flex項目(flex item)
對於flex佈局其實理解下圖便可

容器中默認有兩根軸,主軸(main axis)和cross axis(交叉軸)
開始結束位置分別爲main/cross start和main/cross end
排列的順序爲main/cross direction.
flex item佔據main axis上空間爲main size,佔據cross axis上的空間爲cross size.

---

flex屬性

容器屬性

1. flex-direction

2. flex-wrap

3. flex-flow

4. justify-content

5. align-items

6. align-content

flex-direction
用於改變flex容器的軸線,默認值爲row

• row(default)

• row-reverse(就和後綴同樣,爲main axies反向排列)

• column(改變軸線爲cross axies,爲cross axies方向排列)

• column-reverse(同理改變軸線,cross axies方向反向排列)

justify-content
用於改變flex容器中flex item在軸線上的位置

• flex-start(default,從axies start開始緊靠排列)

• flex-end(axies end端緊靠排列)

• center(展示如其名,axies中間)

• space-between(至關於將空間等分,每份空間中flex-start排列)

• space-around(空間等分,每份空間中center排列)

align-items
爲justify-content的補充屬性,爲flex item在非flex-direction指定的另外一軸線的位置

• flex-start(default)

• flex-end

• center
  以上三種也就不贅述啦

• stretch (如同屬性名同樣,將元素在軸向上伸展開來,注意在固定了height的狀況下不會拉伸)

• baseline (定位線爲item中第一行文字的底部線,根據該線進行定位,也就是基線對齊,取距離start最長的基線對齊)
  值得注意的是屬性值baseline,其基線的定義須要進一步瞭解

連接:
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/css-fle...
其中基線定義會根據狀況不一樣而變化,一般狀況下爲第一項的底線(文字底部/圖片底部),無內容的flex item爲flex item底部border線.

flex-wrap
直到如今爲止,每一個Flex 容器只有一條Flex Line,使用flex-wrap,咱們能建立一個擁有多條Flex Line的Flex 容器

• nowrap(default)

• wrap

• wrap-reverse
  設置爲wrap時,假如咱們一行空間不夠,咱們的flex item在空間不足時會進行換行.建立新的一行.

設置爲wrap-reverse時,在wrap換行效果的同時,將會反向展示

align-content
該屬性定義了flex-wrap的行爲,這和align-item有點類似,可是和其不一樣的是該屬性align的是Flex Line.

• stretch(default)

• flex-start

• flex-end

• center

• space-between

• space-around
  看到他們其實大概就知道是怎麼回事啦,這裏也就很少說了,其實想象一下就知道了,主要是用於設置行/列位置的屬性

flex-flow
= flex-direction + flex-wrap
用於快速設置上述兩個屬性.

項目(item)屬性

1. order

2. flex-grow

3. flex-shrink

4. flex-basis

5. flex

6. align-self

值得注意的屬性
margin
在flex佈局中,margin:auto是一個頗有用的屬性,設置後會自動吸取多餘的空間,能夠利用flex item的該屬性進行多樣化的佈局.

---

order
設置元素的順序,數值越小,排列越前,默認爲0

flex-grow
爲放大比例,默認爲0

flex-shrink
定義了縮小比例,默認爲1,即若是空間不足,項目將會縮小
全部項目爲1時,空間不足,都會縮小,若是你不但願某個容器在任什麼時候候都不被壓縮，那設置flex-shrink:0;數值表明被縮小的程度
!負值無效者縮小

flex-basis
在分配多餘空間前,項目佔據的主軸的空間,瀏覽器將根據該屬性,計算主軸空間是否有多餘空間.

• auto(default)

• <length> 設定爲width/height同樣的值如50px,即固定項目佔據的空間

flex
順序爲 flex-grow flex-shrink flex-basis,默認爲0 1 auto,後兩個屬性爲可選選項
auto(1 1 auto)/none(0 0 auto)

align-self
用於覆蓋Flex容器中的align-items屬性,它有和align-items相同的屬性值

• auto(繼承align-items屬性,無父元素則等同於stretch)

• stretch

• flex-start

• flex-end

• center

• baseline