彈性盒模型

WelliJhon 發(fā)布于2019-08-30 10:57 / 1786人閱讀

摘要：如果一個(gè)項(xiàng)目的屬性為，其他項(xiàng)目都為，則空間不足時(shí)，前者不縮小。

彈性盒模型 1. 容器的概念

指定父元素為 flex

.parent { display: flex; }
.parent_inline { display: inline-flex; }

指定之后 float clear vertical-align 會(huì)失效

父元素稱為 flex container 子元素稱為 flex item

容器默認(rèn)包含 main axis 和 cross axis，
main start main end 為主軸的起始位置和結(jié)束位置
cross start cross end 為交叉軸的起始位置和結(jié)束位置

flex item沿主軸排列，main size cross size 為所占據(jù)的主軸和交叉軸的空間

2. container的屬性

flex-direction flex-wrap flex-flow justify-content align-items align-content 為定義在容器上的屬性

flex-direction 主軸的方向

  row            主軸為水平方向，起點(diǎn)在左端 （默認(rèn)值）
  row-reverse    主軸為水平方向，起點(diǎn)在右端
  column         主軸為垂直方向，起點(diǎn)在上沿
  column-reverse 主軸為垂直方向，起點(diǎn)在下沿

flex-wrap item的換行方向

  nowrap        不換行 （默認(rèn)）
  wrap          換行，第一行在上方
  wrap-reverse  換行，第一行在下方

flex-flow direction、item的簡(jiǎn)寫

justify-content 定義item在主軸上的對(duì)齊方式

flex-start    左對(duì)齊（默認(rèn)值）
flex-end      右對(duì)齊
center        居中
space-between 兩端對(duì)齊，項(xiàng)目之間的間隔都相等
space-around  兩端對(duì)齊, 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等

align-items 定義item在交叉軸上的對(duì)齊方式

flex-start 交叉軸的起點(diǎn)對(duì)齊
flex-end   交叉軸的終點(diǎn)對(duì)齊
center     交叉軸的中點(diǎn)對(duì)齊
baseline   項(xiàng)目的第一行文字的基線對(duì)齊
stretch    如果item未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度 （默認(rèn)值）

align-content 多根軸線的對(duì)齊方式，單軸無效

flex-start    與交叉軸的起點(diǎn)對(duì)齊
flex-end      與交叉軸的終點(diǎn)對(duì)齊
center        與交叉軸的中點(diǎn)對(duì)齊
stretch       軸線占滿整個(gè)交叉軸。（默認(rèn)值）
space-between 與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布
space-around  每根軸線兩側(cè)的間隔都相等,所以，軸線之間的間隔比軸線與邊框的間隔大一倍

3. item的屬性

order flex-grow flex-shrink flex-basis flex align-self 屬性定義在 item 上

order item的排列順序

  數(shù)值越小，排列越靠前，默認(rèn)為0

flex-grow item的放大比例

  默認(rèn)0，即如果存在剩余空間，也不放大
  如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）
  如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍

flex-shrink item的縮放比例

  默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小
  如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。
  如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

flex-basis 在分配多余空間之前，item占據(jù)的主軸空間

  默認(rèn)auto，即項(xiàng)目的本來大小
  設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間

flex

  flex-grow, flex-shrink 和 flex-basis 的簡(jiǎn)寫
  默認(rèn) 0 (1 auto)
  auto 1 1 auto
  none 0 0 auto

align-self item 的對(duì)齊方式

  允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性
  默認(rèn) auto, 表示繼承父元素的 align-items屬性,
  如沒有父元素則為 stretch
  .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
  該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致