Flex 佈局知識點梳理

kelsen發表於2018-07-29
Flex

傳統的佈局方案，在針對特殊佈局時會很不方便，比如垂直居中，把一個容器等分為N列等等。自從 Flex 出現以後，這些都迎刃而解了，本文對Flex相關內容做一個簡單梳理。

什麼是 Flex

Flex 是 Flexible Box 的縮寫，意為”彈性佈局”，任何一個容器都可以指定為Flex佈局。設為 Flex 佈局以後，子元素的 float、clear和vertical-align屬性將失效。要設定一個元素採用 flex 佈局，只需設定器 display 屬性取值為 flex 即可。

.flex-box{
    display:flex;     /* or inline-flex*/
}

常用術語

採用 Flex 佈局的元素，稱為Flex容器。其子元素為flex item，本文稱其為”專案”。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。

  1. flex container : Flex容器，簡稱 容器
  2. flex item : Flex容器的子元素，可稱其為 flex 專案，簡稱 專案
  3. main axis : 主軸， 水平軸，起始位置稱為 main start，結束位置稱為 main end
  4. cross axis: 交叉軸， 垂直軸，開始位置叫做 cross start，結束位置叫做 cross end

專案預設沿 main axis 排列，單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

容器的屬性

  1. flex-direction :flex-direction屬性決定主軸的方向（即專案的排列方向）。
    • row（預設值）：主軸為水平方向，起點在左端。
    • row-reverse：主軸為水平方向，起點在右端。
    • column：主軸為垂直方向，起點在上沿。
    • column-reverse：主軸為垂直方向，起點在下沿。
  2. flex-wrap: 預設情況下，專案都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
    • nowrap（預設）：不換行。
    • wrap：換行，第一行在上方。
    • wrap-reverse：換行，第一行在下方。
  3. flex-flow : flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
    CSS .box { flex-flow: <flex-direction> || <flex-wrap>; }
  4. justify-content: justify-content屬性定義了專案在主軸上的對齊方式。
  5. align-items: align-items屬性定義專案在交叉軸上如何對齊。
  6. align-content: align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

專案的屬性

  1. order 定義專案的排列順序，數值越小越靠前
  2. flex-grow 定義專案的放大比例
  3. flex-shrink 定義專案的縮小比例
  4. flex-basis 定義在分配多餘空間之前，專案佔據的主軸空間
  5. flex 是 grow shrink basis 的簡寫。取值 none | [ <`flex-grow`> <`flex-shrink`>? || <`flex-basis`> ]
  6. align-self 定義當前專案的對其方式。取值 auto | flex-start | flex-end | center | baseline | stretch

寫在後面

本文地址：https://www.cnblogs.com/kelsen/p/8647896.html

關於本文如果您有任何建議或疑問請在下面留言交流，也可通過 Web前端高階工程師 群進行線上溝通。avatar

相關文章