• Flex:‘彈性佈局’
  • • 一、指定為Flex佈局
    • 二、容器的屬性
      • 1.flex-direction
      • 2.flex-wrap屬性
      • 3.flex-flow屬性
      • 4.justify-content屬性
      • 5.align-items屬性
      • 6.align-content屬性
    • 三、專案的屬性
      • 1.order屬性
      • 2.flex-grow屬性
      • 3.flex-shrink屬性
      • 4.flex-basis屬性
      • 5.flex屬性
      • 6.align-self屬性

Flex:‘彈性佈局’

一、指定為Flex佈局

任何一個容器都可以指定為Flex佈局，如果值為flex則容器為塊標籤

容器預設存在兩根軸，

水平主軸是main axis,結束位置叫做main end;

垂直主軸是cross axis,結束位置是cross end

1.1

xx{
//指定為flex佈局，為塊標籤
    display:flex; 
//為行內標籤
    display{display:inline-flex;}
 }

二、容器的屬性

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

1.flex-direction

direction:方向;趨勢;
flex-direction決定主軸的方向

 flex-direction: row | row-reverse | column | column-reverse;
 

row:水平方向，起點在左端

row-reverse:水平方向，起點在右端

column:垂直方向,起點在左端

column-reverse:垂直方向，起點在右端
 

2.flex-wrap屬性

預設下，所有都排在一條軸線上，flex-wrap定義當一條軸線排不下時，如何換行

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap:不換行

wrap:換行，第一行在上方

wrap-reverse:換行，第一行在下方

3.flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

    flex-flow: <flex-direction> <flex-wrap>;
    //將上面兩個標籤組合起來簡寫
 

4.justify-content屬性

justify-content屬性定義了專案在主軸上的對齊方式

justify-content: flex-start | flex-end | felx-center | space-between | space-around;
}

flex-start:左對齊

flex-end:右對齊

center: 居中對齊

space-between:兩端對齊,專案之間間隔相等

space-around:專案兩側間隔相等

5.align-items屬性

algn-items定義專案在交叉軸上如何對齊

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center:交叉軸的中點對齊
baseline:與第一行文字的基線對齊
stretch:如果未設定高度或設為auto,將佔滿整個容器

6.align-content屬性

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（預設值）：軸線佔滿整個交叉軸。

三、專案的屬性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.order屬性

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。

order:x;
order:-1;

數值越小,排列越前

2.flex-grow屬性

flex-grow屬性定義專案的佔比例，預設為0

    flex-grow:x;

3.flex-shrink屬性

flex-shrink屬性定義了專案的縮小比例,預設為1,如果空間不足，該專案將縮小

4.flex-basis屬性

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

flex-basis:<length>|auto;

可以設為px的值,將佔據固定空間

5.flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

flex:none;|<flex-grow> <flex-shrink>

6.align-self屬性

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;