Flex布局:語法篇

參考資料:《Flex 布局教程:語法篇》

設(shè)置為Flex布局后(display: flex;)伴澄,子元素的float碰缔、clearvertical-align屬性將失效账劲。

Flex容器:采用Flex布局的元素;
Flex項目:Flex容器的所有子元素金抡;

Flex容器的6個屬性

  • flex-direction(項目的排列方向瀑焦,flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap(項目是否換行,flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow(flex-direction和flex-wrap的簡寫梗肝,flex-flow: <flex-direction> <flex-wrap>;
  • justify-content(項目在主軸上的對齊方式榛瓮,justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items(項目在交叉軸上的對齊方式,align-items: flex-start | flex-end | center | baseline | stretch;
  • align-content(多根軸線的對齊方式巫击,只有一根軸線禀晓,該屬性不起作用,align-content: flex-start | flex-end | center | space-between | space-around | stretch;

注:align-content中提刀的多根軸線坝锰,即flex-wrap: wrap | wrap-reverse且項目的排布不止一行粹懒,如align-content示例

Flex項目的6個屬性

  • order(項目的排序順序顷级,值越小越靠前凫乖,默認0,order: <integer>;
  • flex-grow(項目的放大比例,默認0帽芽,即如果存在剩余空間也不放大删掀,flex-grow: <number>;
  • flex-shrink(項目的縮小比例,默認1嚣镜,即如果空間不足則縮小爬迟,負值無效,flex-shrink: <number>;
  • flex-basis(在分配多余空間之前菊匿,項目占據(jù)的主軸空間付呕,默認auto,flex-basis: <length> | auto;
  • flex(flex-grow跌捆、flex-shrink和flex-basis的簡寫徽职,auto1 1 auto)和none0 0 auto)兩個快捷值)
  • align-self(允許單個項目有與其他項目不一樣的對齊方式,默認auto佩厚,繼承父元素的align-items屬性姆钉,align-self: auto | flex-start | flex-end | center | baseline | stretch;

可以通過Flex布局示例更清晰的了解Flex布局。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抄瓦,一起剝皮案震驚了整個濱河市潮瓶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌钙姊,老刑警劉巖毯辅,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異煞额,居然都是意外死亡思恐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門膊毁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來胀莹,“玉大人,你說我怎么就攤上這事婚温∶柩妫” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵栅螟,是天一觀的道長栈顷。 經(jīng)常有香客問我,道長嵌巷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任室抽,我火速辦了婚禮搪哪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘坪圾。我一直安慰自己晓折,他們只是感情好惑朦,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著漓概,像睡著了一般漾月。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上胃珍,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天梁肿,我揣著相機與錄音,去河邊找鬼觅彰。 笑死吩蔑,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的填抬。 我是一名探鬼主播烛芬,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼飒责!你這毒婦竟也來了赘娄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤宏蛉,失蹤者是張志新(化名)和其女友劉穎遣臼,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體檐晕,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡暑诸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了辟灰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片个榕。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖芥喇,靈堂內(nèi)的尸體忽然破棺而出西采,到底是詐尸還是另有隱情,我是刑警寧澤继控,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布械馆,位于F島的核電站,受9級特大地震影響武通,放射性物質(zhì)發(fā)生泄漏霹崎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一冶忱、第九天 我趴在偏房一處隱蔽的房頂上張望尾菇。 院中可真熱鬧,春花似錦、人聲如沸派诬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽默赂。三九已至沛鸵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缆八,已是汗流浹背曲掰。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留耀里,地道東北人蜈缤。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像冯挎,于是被迫代替她去往敵國和親底哥。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354