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前端高級工程師 群進行線上溝通。