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)目的排列方向)
flex-direction:row 默認(rèn) 主軸(水平方向)從左向右排列
flex-direction: row-reverse;主軸(水平方向)從右向左排列
flex-direction: column; 將主軸改為了從上到下,將交叉軸改為了從左到右,
flex-direction: column-reverse;主軸從下到上,
3,flex-flow:
是flex-wrap和flex-direction的混合屬性: 有兩個(gè)值 用了這個(gè)屬性,上面兩個(gè)屬性都可以不用寫.
flex-flow:wrap row; || wrap column || nowrap row-reverse || nowrap column-reverse
4,justify-content:
決定項(xiàng)目在主軸上的對(duì)齊方式(以下屬性默認(rèn)以從左向右為例)
flex-start; 延主軸左側(cè)對(duì)齊flex-end;延右側(cè)對(duì)齊center;延中間 對(duì)齊space-around;均勻分布,項(xiàng)目?jī)蓚?cè)的留白距離相等,space-between; 項(xiàng)目和項(xiàng)目之間的距離是相等的.項(xiàng)目靠?jī)蓚?cè)對(duì)齊.
5,align-items:
決定項(xiàng)目延交叉軸的對(duì)齊方式(默認(rèn)從上到下為例)
flex-start;(延上下對(duì)齊) ||
flex-end;(延下方對(duì)齊) ||
center;(延中間對(duì)齊)
align-items: stretch;(默認(rèn)值,填滿整個(gè)交叉軸空間)
align-items: baseline;延文字基線對(duì)齊
6,align-content:
決定多跟軸線延交叉軸的對(duì)齊方式,(只有換行產(chǎn)生多跟軸線是才有效)
align-content: stretch;填滿整個(gè)交叉軸空間,默認(rèn)值
align-content: space-between;沿交叉軸兩側(cè)對(duì)齊
align-content: space-around;沿交叉軸均勻分布,留白相等
align-content: center;沿交叉軸中點(diǎn)對(duì)齊
align-content: flex-end;沿交叉軸結(jié)束點(diǎn)對(duì)齊
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)值
auto(使用項(xiàng)目本身大小計(jì)算); ||
像素值;, 使用指定的像素值 ||
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ō))
flex-start
flex-end
center
stretch
baseline
6,order:
決定項(xiàng)目的順序,默認(rèn)為0;值越小越靠前,可接收負(fù)值,
