設(shè)置display : flex

• flex-flow

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

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

  簡寫示例: flex-flow : row warp

nowarp

warp

• justify-content

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

space-around

space-between

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

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

  ?

flex-start

flex-end

flex-baseline

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

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

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

  簡寫示例: flex : 0 1 150rpx;

• order 排列順序使用

• position

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

relative

absolute