Flex布局

參考地址:阮一峰Flex布局語(yǔ)法篇

1幔妨、容器的屬性

? ??1.1、flex-direction 主軸方向

? ????? (row 默認(rèn)值:橫 | row-reverse:倒著橫 | column:豎 | column-reverse:倒著豎)

? ??1.2谍椅、flex-wrap 是否換行

? ???? (nowrap 默認(rèn)值:不換 | wrap:換| wrap-reverse:換行误堡,第一行在下面)

? ??1.3、flex-flow 主軸方向和換行簡(jiǎn)寫

? ? ? ? ?(flex-direction || flex-wrap)

? ??1.4雏吭、justify-content 主軸對(duì)齊方式

? ? ? ? ?(flex-start 默認(rèn)值:| flex-end | center | space-between 兩端對(duì)齊锁施,軸間隔平分 | space-around 每根軸兩側(cè)間隔相等)

? ??1.5、align-items? 交叉軸上對(duì)齊方式(縱向?qū)R方式)

? ???? (flex-start | flex-end | center | baseline 文字基線 | stretch 默認(rèn)值:占滿)

? ??1.6杖们、align-content 多根軸線(多行)的對(duì)齊方式

? ???? (flex-start | flex-end | center | space-between | space-around | stretch 默認(rèn)值:占滿)

2颅痊、項(xiàng)目屬性

? ??2.1辛块、order 排序值;默認(rèn)0簿透,從小到大排序羹令。

? ? 2.2、flex-grow 項(xiàng)目放大比例;

????????? 默認(rèn)0:不放大孝治。

????????? 都為1:等分剩余空間列粪。

????????? 2~N:數(shù)值越大,剩余空間分成比例越高谈飒。

? ? 2.3岂座、flex-shrink? 項(xiàng)目縮小比例;

? ? ? ? ? 默認(rèn)1:空間不足將縮小。

????????? 都為1:都等比例縮小杭措。

? ? ? ? ? 一個(gè)為0,其他為1:前者不縮小费什。

? ? ? ? ? 負(fù)值無(wú)效(等同默認(rèn)值)

? ? ? ? ? 2~N:數(shù)值越大縮的比例越多。

? ??2.4瓤介、flex-basis 在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間赘那。瀏覽器根據(jù)這個(gè)屬性刑桑,計(jì)算主軸是否有多余空間。

? ? ? ? ? ?默認(rèn)值auto:項(xiàng)目本身大小募舟。

? ? 2.5祠斧、flex

? ? ? ? ? flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫,默認(rèn)值為0 1 auto拱礁。后兩個(gè)屬性可選琢锋。

? ? ? ? ? 兩個(gè)快捷值:auto (1 1 auto) 和 none (0 0 auto)。

? ? 2.6呢灶、align-self 單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式吴超,

? ? ? ? ?(auto | flex-start | flex-end | center | baseline | stretch)

? ? ? ? ? 可覆蓋align-items屬性。默認(rèn)值為auto鸯乃,表示繼承父元素的align-items屬性鲸阻,如果沒(méi)有父元素,則等同于stretch。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鸟悴,一起剝皮案震驚了整個(gè)濱河市陈辱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌细诸,老刑警劉巖沛贪,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異震贵,居然都是意外死亡利赋,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門屏歹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)隐砸,“玉大人,你說(shuō)我怎么就攤上這事蝙眶〖鞠#” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵幽纷,是天一觀的道長(zhǎng)式塌。 經(jīng)常有香客問(wèn)我,道長(zhǎng)友浸,這世上最難降的妖魔是什么峰尝? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮收恢,結(jié)果婚禮上武学,老公的妹妹穿的比我還像新娘。我一直安慰自己伦意,他們只是感情好火窒,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著驮肉,像睡著了一般熏矿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上离钝,一...
    開(kāi)封第一講書(shū)人閱讀 52,441評(píng)論 1 310
  • 那天票编,我揣著相機(jī)與錄音,去河邊找鬼卵渴。 笑死慧域,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的浪读。 我是一名探鬼主播吊趾,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼宛裕,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了论泛?” 一聲冷哼從身側(cè)響起揩尸,我...
    開(kāi)封第一講書(shū)人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎屁奏,沒(méi)想到半個(gè)月后岩榆,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡坟瓢,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年勇边,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片折联。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡粒褒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出诚镰,到底是詐尸還是另有隱情奕坟,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布清笨,位于F島的核電站月杉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏抠艾。R本人自食惡果不足惜苛萎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望检号。 院中可真熱鬧腌歉,春花似錦、人聲如沸齐苛。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)脸狸。三九已至最仑,卻和暖如春藐俺,著一層夾襖步出監(jiān)牢的瞬間炊甲,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工欲芹, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卿啡,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓菱父,卻偏偏與公主長(zhǎng)得像颈娜,于是被迫代替她去往敵國(guó)和親剑逃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

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