flex布局

設置給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,越小越靠前趣钱,可以接收負值

練習flex的青蛙小游戲

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市首有,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌卜壕,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轴捎,死亡現(xiàn)場離奇詭異蚕脏,居然都是意外死亡,警方通過查閱死者的電腦和手機驼鞭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門挣棕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來少辣,“玉大人剥扣,你說我怎么就攤上這事≡砀剩” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長璧瞬。 經(jīng)常有香客問我,道長嗤锉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任瘟忱,我火速辦了婚禮奥额,結果婚禮上访诱,老公的妹妹穿的比我還像新娘。我一直安慰自己触菜,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布哲泊。 她就那樣靜靜地躺著催蝗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪生逸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天烙无,我揣著相機與錄音截酷,去河邊找鬼。 笑死乾戏,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的三幻。 我是一名探鬼主播呐能,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼朗徊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起爷恳,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎棚壁,沒想到半個月后铸豁,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年头镊,在試婚紗的時候發(fā)現(xiàn)自己被綠了魄幕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡坛芽,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出咙轩,到底是詐尸還是另有隱情阴颖,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布钾菊,位于F島的核電站,受9級特大地震影響偎肃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜滞详,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一茵宪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧稀火,春花似錦、人聲如沸篇裁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽黍聂。三九已至身腻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嘀趟,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工牛隅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留酌泰,地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓丈攒,卻偏偏與公主長得像授霸,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子显设,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容