基礎(chǔ)

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

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

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

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

常用css屬性

• 應(yīng)用在flex container上的css屬性

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

• 應(yīng)用在flex items上的css屬性

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

flex 布局模型

image.png

flex-direction

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

row

row-reverse

columu

columu-reverse

justify-content

justify-content 決定了flex items 在 main axis 上的對(duì)齊方式
- flex-start（默認(rèn)值) : 與main start對(duì)齊
- flex-end : 與main end 對(duì)齊
- center : 居中對(duì)齊
- space-betueen:
1. flex items 之間的距離相等
2. 與main start、main end 兩端對(duì)齊
- 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 上的對(duì)齊方式

• strech(默認(rèn)值):當(dāng)flex items 在 cross axis 方向的 size 為 auto 時(shí)，會(huì)自動(dòng)拉伸至填充flex container
• flex-start 與 cross start 對(duì)齊
• flex-end: 與 cross end 對(duì)齊
• center: 居中對(duì)齊
• baseline: 與基線對(duì)齊
  
  image.png

flex-wrap

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

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

flex-flow

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

// flex-flow: column wrap 等價(jià)于

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

align-content

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

• stretch（默認(rèn)值）：與align-items的stretch類似
• flex-start: 與 cross start 對(duì)齊
• flex-end: 與 cross end 對(duì)齊
• center: 居中對(duì)齊
• space-betueen:
  1. flex items 之間的距離相等
  2. 與cross start、cross end 兩端對(duì)齊
• 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 的排布順序

• 可以設(shè)置任意整數(shù)（正整數(shù)、負(fù)整數(shù)、0），值越小就越排在前面
• 默認(rèn)值是0

align-self

flex items 可以通過align-self覆蓋flex-container設(shè)置align-items

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

flex-grow

flex-grow 決定了flex items 如何擴(kuò)展

• 可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)、正整數(shù)、0）

• 當(dāng)flex container在main axis 方向上有剩余size時(shí)，flex-grow才有效

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

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

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

flex-shrink

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

• 可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)、正整數(shù)、0), 默認(rèn)值1

• 當(dāng)flex items 在 main axis 方向上超過了flex container的size，flex-shrink 才會(huì)生效

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

• 如果所有flex items 的 flex-shrink總和(sum)不超過1，每個(gè)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 用來設(shè)置flex items 在 main axis 方向上 base size

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

flex

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

• 默認(rèn)值是 0 1 auto
• none : 0 0 auto