-
項(xiàng)目的屬性
-
order
order屬性定義項(xiàng)目的排列順序驻子。數(shù)值越小进肯，排列越靠前，默認(rèn)為0腔呜，負(fù)值有效叁温。order.png -
flex-grow
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0核畴，即如果存在剩余空間膝但，也不放大。grow.png -
flex-shrink
flex-shrink屬性定義了項(xiàng)目的縮小比例谤草，默認(rèn)為1跟束，即如果空間不足該項(xiàng)目將縮小莺奸。
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)冀宴，都將等比例縮小灭贷。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1略贮，則空間不足時(shí)甚疟，前者不縮小。
負(fù)值對(duì)該屬性無(wú)效逃延。shrink.png -
flex-basis
flex-basis屬性定義了在分配多余空間之前览妖，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性揽祥，計(jì)算主軸是否有多余空間讽膏。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小拄丰。
設(shè)置或檢索彈性盒伸縮基準(zhǔn)值府树。如果所有子元素的基準(zhǔn)值之和大于剩余空間，則會(huì)根據(jù)每項(xiàng)設(shè)置的基準(zhǔn)值料按，按比率伸縮剩余空間basis.png
由上圖可見(jiàn)挺尾，塊2,3,4分別占據(jù)了1/6,1/3,1/2總空間。
flex
flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫(xiě)站绪，默認(rèn)值為0 1 auto遭铺。后兩個(gè)屬性可選。-
align-self
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式恢准，可覆蓋align-items屬性魂挂。默認(rèn)值為auto，表示繼承父元素的align-items屬性馁筐，如果沒(méi)有父元素涂召，則等同于stretch。as.png
該屬性可能取6個(gè)值：auto敏沉，flex-start果正，flex-end，center盟迟，baseline秋泳，stretch，除了auto攒菠，其他都與align-items屬性完全一致迫皱。
-
CSS3 Flex-box 模型學(xué)習(xí)：Day 2
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門(mén)私杜，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人救欧，你說(shuō)我怎么就攤上這事÷喙猓” “怎么了笆怠？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)誊爹。 經(jīng)常有香客問(wèn)我蹬刷，道長(zhǎng)，這世上最難降的妖魔是什么频丘？ 我笑而不...
- 正文 為了忘掉前任办成，我火速辦了婚禮，結(jié)果婚禮上搂漠，老公的妹妹穿的比我還像新娘迂卢。我一直安慰自己，他們只是感情好桐汤，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布而克。 她就那樣靜靜地躺著，像睡著了一般怔毛。 火紅的嫁衣襯著肌膚如雪员萍。 梳的紋絲不亂的頭發(fā)上，一...
- 那天拣度，我揣著相機(jī)與錄音碎绎，去河邊找鬼。 笑死抗果，一個(gè)胖子當(dāng)著我的面吹牛筋帖，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播冤馏，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼幕随，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了宿接？” 一聲冷哼從身側(cè)響起赘淮，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤辕录，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后梢卸，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體走诞，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年蛤高，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蚣旱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布尔许，位于F島的核電站喜庞，受9級(jí)特大地震影響诀浪，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜延都，卻給世界環(huán)境...
- 文/蒙蒙 一雷猪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧晰房，春花似錦求摇、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至幽污，卻和暖如春嚷辅，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背距误。 一陣腳步聲響...
- 正文 我出身青樓趁俊，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親刑然。 傳聞我的和親對(duì)象是個(gè)殘疾皇子寺擂，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開(kāi)發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
- 移動(dòng)開(kāi)發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
- 在以前頁(yè)面布局多依賴(lài)于table，但table標(biāo)簽太多，于是有了absolute布局怔软，float布局等垦细，但它們小問(wèn)...
- 前言 FlexBox是css3的一種新的布局方式挡逼，天生為解決布局問(wèn)題而存在的它括改，比起傳統(tǒng)的布局方式，我們使用Fle...
