CSS學習-Flex佈局複習

Flex佈局詳解

傳統的網站中，佈局的解決方法都是經過盒模型來控制，依賴Display,float,position來進行實現的，雖然能夠解決大部分的佈局狀況，可是一些比較特殊的佈局實現起來就存在問題了，好比咱們常見的垂直居中，所以Flex就被製造出來了，隨着時間的考驗，flex慢慢的被瀏覽器和開發者接受。能夠很是簡單的響應各類頁面佈局。

Flex是什麼

Flex稱之爲彈性盒子，可以給盒子模型提供更增強大的靈活性，經過display 的 flex屬性就能夠指定爲flex，須要注意的是轉換成爲flex後，一些屬性也不會生效，如：float，clear ，vertical-align就沒有效果了。

.context{
  display : flex;
}
複製代碼

Flex的屬性介紹

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction屬性

direction決定了主軸的方向

它有四個值來肯定位置。

• row ： 默認值，主軸水平方向，起點在左端
• row-reverse ： 主軸爲水平方向，起點在右端
• column : 主軸爲垂直方向，起點在上端
• column-reverse ： 主軸在垂直方向，七點在下端。

flex-wrap

默認狀況下wrap都排在一條直線上

它有三個屬性來肯定它的行爲：

• nowrap（默認） ： 不換行，一直排在一行
• wrap ： 換行第一排在上方
• wrap-reverse ： 換行第一行在下方

flex-flow

flow是flex-direction和flex-wrap的簡寫形式，默認值爲row nowrap

justify-content

定義了項目在主軸上面的對齊方式

.content{
    /* 默認 */
    justify-content: flex-start;
}

複製代碼

• flex-start : 默認左對齊。
• flex-end ： 右對齊。
• center ： 居中對齊。
• space-between : 兩端對齊，元素之間間隔同樣的。
• space-around ： 元素之間的間隔會比頭尾元素距離邊框的間隔大一倍。

align-items

與justify-content不一樣的是，align-items是在Y軸的對齊方式，與justity-content交叉。。。。

• flex-start ： 交叉軸的起點對齊，若是x與y相交，就是從y頂部開始
• flex-end : 交叉軸終點對齊，若是x和y軸相交，就是從y底部開始
• center ： 交叉軸的中部對齊 ，y軸居中通常
• baseline ： 元素中第一行文本的底線對齊，能夠想象成串串
• stretch ： 默認值，元素無明確寬度，或者爲auto已經100%，將佔滿整個Y軸

align-content

多跟軸線對齊方法，若是隻有一根軸線，那麼將不起做用。 該屬性有六個值：

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
• space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線佔滿整個交叉軸。

摘抄自:阮一峯的Blog，學習備份。

地址：Flex 佈局教程：語法篇 - 阮一峯的網絡日誌