CSS學習-Flex佈局複習

wangly19發表於2019-04-15
CSSFlex

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決定了主軸的方向

bg2015071010.png
它有四個值來確定位置。

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

flex-wrap

預設情況下wrap都排在一條直線上

bg2015071006.png
它有三個屬性來確定它的行為：

  • 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 佈局教程：語法篇 - 阮一峰的網路日誌

相關文章