設(shè)置display : flex

• flex-flow

  row(默認(rèn)行顯示)/column(列顯示)

  nowarp(默認(rèn)不自動(dòng)換行)/warp(自動(dòng)換行)/reverse(反轉(zhuǎn),在換行時(shí)有效)

  簡(jiǎn)寫示例: flex-flow : row warp

nowarp

warp

• justify-content

  flex-start(默認(rèn)左對(duì)齊)/flex-end(右對(duì)齊)/center(居中挨著)/space-around(居中分散)/space-between(兩端對(duì)齊)

space-around

space-between

• align-items align-self(設(shè)置自己的位置)

  flex-start(默認(rèn)左對(duì)齊)/flex-end(右對(duì)齊)/center(居中)/baseline(內(nèi)容在統(tǒng)一水平線上)/stretch(拉伸,需要在item不設(shè)置高度時(shí)有效)

  ?

flex-start

flex-end

flex-baseline

• flex-grow 有剩余空間時(shí)所占比重,默認(rèn)0

  flex-shirnk無剩余空間時(shí)縮放比重,默認(rèn)1

  flex-basis指定某一元素的大小

  簡(jiǎn)寫示例: flex : 0 1 150rpx;

• order 排列順序使用

• position

  relative(相對(duì)定位)/absolute(絕對(duì)定位)

relative

absolute