設置給flex盒子的6點屬性娜睛,分別為
1畦戒、flex-wrap: nowrap;(指定項目是否換行)
2、flex-direction: row;(決定主軸方向)
3障斋、flex-flow: nowrap row;(為前兩者的縮寫)
4、justify-content: flex-start;(項目在主軸上的排列方式)
5配喳、align-items: stretch;(項目在交叉軸上的排列方式)
6凳干、align-content:stretch;(多行時,多跟軸線和交叉軸的對齊方式)
1救赐、flex-wrap 指定項目是否換行
flex-wrap: nowrap | wrap | wrap-reverse
指定項目是否換行
nowrap 不換行 默認值
wrap 換行 正序排列
wrap-reverse 換行 行倒序排列
2、flex-direction 決定主軸的方向
flex-direction: row | row-reverse | column | column-reverse
決定主軸方向(項目的排列方向)
row : 默認水平方向(從左到右)
row-reverse : 水平方向(從右往左)
column : 垂直方向(從上到下)
column-reverse : 垂直方向(從上到下)
3泌绣、flex-flow 前兩者的縮寫
flex-flow: flex-wrap flex-direction
4、justify-content 決定項目在主軸上的對齊方式
/*justify-content: center | flex-end | flex-start | space-around |space-between
決定項目在主軸上的對齊方式(一下內(nèi)容以從左到右為例)
flex-start : 沿左側(cè)對齊
center : 沿中間對齊
flex-end : 沿右側(cè)對齊
space-around : 均勻分布 (項目兩側(cè)留白相等)
space-between : 項目靠兩側(cè)對齊*/
5阿迈、aline-items 決定項目在交叉軸上的對齊方式
/*align-items: flex-start | flex-end | center | stretch | baseline
決定項目沿交叉的對齊方式(以默認從上到下為例)
flex-start : 沿上方對齊
center : 沿中間對齊
flex-end : 沿下方對齊
baseline : 沿文字基線對齊
stretch : 默認值 填滿整個交叉軸空間*/
6轧叽、aline-content 多行時,決定多跟軸線跟交叉軸的對齊方式
/*align-content: flex-start | center | flex-end | space-between | space-around | stretch
決定多跟軸線沿交叉軸的對齊方式(只有換行產(chǎn)出多跟軸線時才有效)
flex-start : 沿交叉軸起點對齊
flex-end : 沿交叉軸結束點對齊
center : 沿交叉軸終點對齊
space-between : 沿交叉軸兩側(cè)對齊
space-around : 沿交叉軸均勻分布
stretch : 填滿整個交叉軸 默認值*/
#-------------------------------------------------------------------
下面是給項目自身設置的6點屬性待逞。
1网严、**flex-grow: : [number] 決定項目放大比率 (填滿主軸剩余空間)**
number : 數(shù)值 默認為0 不自動放大,值越大 , 放大比率越大。
2、**flex-shrink: [number] 決定項目縮小的比例(shrink-->收縮)**
number : 數(shù)值 默認為1 自動縮小 0 不縮小,值越大縮小比率越大当犯。
3、**flex-basis: auto | pixel | percent (決定項目放大縮小的基準值)**
auto : 使用項目本身大小
pixel : 使用指定像素值
percent : 使用指定的百分比
100% 當 wrap 時,項目會占容器的整個寬度
當 nowrap 時,項目會占容器主軸剩余的寬度(其他放大無效)
4灶壶、**flex: 1 1 100%;(以上三個的簡寫)**
5杈曲、**align-self: flex-start | flex-end | center | stretch | baseline** (第一個項目的文字基線):**決定項目自身的對齊方式(相對于交叉軸)**
6胸懈、**order: [number] 決定項目的順序**
默認為0,越小越靠前趣钱,可以接收負值