基礎

• 開啟了flex布局的元素叫做 flex container

• flex container里面的直接子元素叫做flex items

• 設置display屬性為flex或者inline-flex 可以成為flex container

  • flex: flex container以block-level形式存在 (單獨占一行，下一個元素會換行顯示)
  • inline flex : flex container 以inline-level 形式存在（可以與下一個元素在一行內）

常用css屬性

• 應用在flex container上的css屬性

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

• 應用在flex items上的css屬性

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

flex 布局模型

image.png

flex-direction

• flex items 默認都是沿著main axis (主軸) 從 main start 開始往 main end 方向排布
• flex-direction 決定了main axis 的方向，有四個取值
• row(默認值)、row-reverse、column、column-reverse

row

row-reverse

columu

columu-reverse

justify-content

justify-content 決定了flex items 在 main axis 上的對齊方式
- flex-start（默認值) : 與main start對齊
- flex-end : 與main end 對齊
- center : 居中對齊
- space-betueen:
1. flex items 之間的距離相等
2. 與main start、main end 兩端對齊
- space-evenly:
1. flex items 之間距離相等
2. flex items 與main start、main end 之間的距離 等于 flex items 之間的距離
- space-around:
1. flex items 之間距離相等
2. flex items 與main start、main end 之間的距離 等于 flex items 之間距離的一半

image.png

align-items

align-items決定了flex items 在 cross axis 上的對齊方式

• strech(默認值):當flex items 在 cross axis 方向的 size 為 auto 時，會自動拉伸至填充flex container
• flex-start 與 cross start 對齊
• flex-end: 與 cross end 對齊
• center: 居中對齊
• baseline: 與基線對齊
  
  image.png

flex-wrap

flex-wrap決定了flex container 是單行還是多行

• nowrap(默認)：單行
• wrap:多行
• wrap-reverse:多行（對比wrap， cross start 與 cross end 相反）

flex-flow

flex-flow 是 flex-direction ||flex-wrap 的簡寫

// flex-flow: column wrap 等價于

flex-direction:column;
flex-wrap:wrap;

align-content

align-content 決定了多行 flex items 在 cross axis 上的對齊方式，用法與justfiy-content類似

• stretch（默認值）：與align-items的stretch類似
• flex-start: 與 cross start 對齊
• flex-end: 與 cross end 對齊
• center: 居中對齊
• space-betueen:
  1. flex items 之間的距離相等
  2. 與cross start、cross end 兩端對齊
• space-evenly:
  1. flex items 之間距離相等
  2. flex items 與cross start、cross end 之間的距離 等于 flex items 之間的距離
• space-around:
  1. flex items 之間距離相等
  2. flex items 與cross start、cross end 之間的距離 等于 flex items 之間距離的一半

image.png

order

order決定了 flex items 的排布順序

• 可以設置任意整數（正整數、負整數、0），值越小就越排在前面
• 默認值是0

align-self

flex items 可以通過align-self覆蓋flex-container設置align-items

• auto(默認值):遵從flex-container設置的align-items
• strech、flex-start、flex-end、center、baseline, 效果與align-items一致

flex-grow

flex-grow 決定了flex items 如何擴展

• 可以設置任意非負數字（正小數、正整數、0）

• 當flex container在main axis 方向上有剩余size時，flex-grow才有效

• 如果所有flex items 的flex-grow總和超過1，每個flex item擴展的size為flex container的剩余size * flex-grow / sum

• 如果所有flex items 的 flex-grow總和不超過1，每個flex item 擴展的size為 flex container 的剩余size * flex-grow

• flex items 擴展后的最終size不能超過max-width/max-height

flex-shrink

flex-shrink 決定了flex items 如何收縮

• 可以設置任意非負數字（正小數、正整數、0), 默認值1

• 當flex items 在 main axis 方向上超過了flex container的size，flex-shrink 才會生效

• 如果所有flex items 的 flex-shrink總和(sum)超過1，每個flex item 收縮的size為flex items 超出 flex container的size * 收縮比例 / 所有flex items的收縮比例總和

• 如果所有flex items 的 flex-shrink總和(sum)不超過1，每個flex item 收縮的size為flex items 超出 flex container的size * sum * 收縮比例/ 所有flex items 的收縮比例總和

• 收縮比例 = flex-shrink * flex item 的base size

• base size 就是 flex item 放入 flex container 之前的 size

• flex items 收縮后的最終size不能小于 min-width/min-height

flex-basis

flex-basis 用來設置flex items 在 main axis 方向上 base size

• auto (默認值)：、content: 取決于內容本身的 size
• 決定 flex items 最終base size 的因素，優先級從高到低
  1. max-width/max-height/min-width/min-height
  2. flex-basis
  3. width/height
  4. 內容本身的 size

flex

flex 是 flex-grow flex-shrink? || flex basis 的簡寫

• 默認值是 0 1 auto
• none : 0 0 auto