FLEX布局:彈性布局;

彈性布局是為了讓容器有能力改變項(xiàng)目的寬度和高度,以填滿可用空間,

注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

容器屬性:6個(gè)

1,flex-wrap(指定項(xiàng)目是否換行):?

wrap(換行,正序排列); ?

?nowrap(默認(rèn)就是不換行);

?wrap-reverse(換行,倒序排列)

2,flex-direction:

決定主軸的方向,(項(xiàng)目的排列方向)

1) ? flex-direction:row ?默認(rèn) 主軸(水平方向)從左向右排列

2) ? flex-direction: row-reverse;主軸(水平方向)從右向左排列

3) ? flex-direction: column; 將主軸改為了從上到下,將交叉軸改為了從左到右,

4) ? flex-direction: column-reverse;主軸從下到上,

3,flex-flow:

是flex-wrap和flex-direction的混合屬性: ? 有兩個(gè)值 ?用了這個(gè)屬性,上面兩個(gè)屬性都可以不用寫(xiě).

flex-flow:wrap ? row; ? ?|| ? ?wrap ?column ? || ?nowrap ? ?row-reverse ? ?|| ?nowrap ? column-reverse

4,justify-content:?

決定項(xiàng)目在主軸上的對(duì)齊方式(以下屬性默認(rèn)以從左向右為例)

?1) ? ? ?flex-start; 延主軸左側(cè)對(duì)齊

?2) ? ? flex-end;延右側(cè)對(duì)齊

3) ? ? center;延中間 對(duì)齊

4) ? ? space-around;均勻分布,項(xiàng)目?jī)蓚?cè)的留白距離相等,

5) ? ?space-between; 項(xiàng)目和項(xiàng)目之間的距離是相等的.項(xiàng)目靠?jī)蓚?cè)對(duì)齊.

5,align-items: (單根軸線)

決定項(xiàng)目延交叉軸的對(duì)齊方式(默認(rèn)從上到下為例)

1) ? flex-start;(延上下對(duì)齊) ?|| ?

2) ? flex-end;(延下方對(duì)齊) ? ?||?

3) ? center;(延中間對(duì)齊)

4) ? align-items: stretch;(默認(rèn)值,填滿整個(gè)交叉軸空間)

5) ? align-items: baseline;延文字基線對(duì)齊

6,align-content:(多跟軸線)

決定多跟軸線延交叉軸的對(duì)齊方式,(只有換行產(chǎn)生多跟軸線是才有效)

1) ? align-content: stretch;填滿整個(gè)交叉軸空間,默認(rèn)值

2) ? align-content: space-between;沿交叉軸兩側(cè)對(duì)齊

3) ? align-content: space-around;沿交叉軸均勻分布,留白相等

4) ? align-content: center;沿交叉軸中點(diǎn)對(duì)齊

5) ? align-content: flex-end;沿交叉軸結(jié)束點(diǎn)對(duì)齊

6) ? align-content: flex-start;沿交叉軸起點(diǎn)對(duì)齊

項(xiàng)目屬性

1,flex-grow:[number]

決定項(xiàng)目放大比例,填滿主軸剩余空間 ? number是一個(gè)數(shù)值,默認(rèn)為0,不放大;值越大,放大比例越大;

2,flex-shrink: 0;

決定項(xiàng)目縮小的比例;默認(rèn)為1,自動(dòng)縮小的;值越大,縮小比例越大,為0的時(shí)候是不縮小的

3,flex-basis:?

決定了項(xiàng)目放大或者縮小的基準(zhǔn)值

1) ? auto(使用項(xiàng)目本身大小計(jì)算);? ||??

2) ? 像素值;, ?使用指定的像素值 ?||??

3) ? 100%使用指定的百分比;

? ? ? ? ?no-wrap的時(shí)候,項(xiàng)目會(huì)占容器的剩余寬度,(其他放大無(wú)效)

? ? ? ? ?wrap的時(shí)候,項(xiàng)目會(huì)占容器的整個(gè)兒寬度

4,flex:混合屬性:

5,align-self:決定項(xiàng)目自身的對(duì)齊方式(相對(duì)于交叉軸來(lái)說(shuō))

1) ? flex-start

2) ? flex-end

3) ? center

4) ? stretch

5) ? baseline

####6,order:決定項(xiàng)目的順序,默認(rèn)為0;值越小越靠前,可接收負(fù)值,