彈性布局flex

flex布局

概念:主軸、 交叉軸
可以讓元素在主軸和交叉軸上面任意對(duì)齊玛荞,寬高占比支子,順序排列

在父元素上設(shè)置
display: flex


justify-content
設(shè)置元素在主軸上的對(duì)齊方式
屬性值:flex-start;主軸起點(diǎn)對(duì)齊
flex-end主軸終點(diǎn)對(duì)齊
center主軸中點(diǎn)對(duì)齊
space-bewteen把剩余的空間均分給項(xiàng)目與項(xiàng)目之間
space-around把剩余的空間均分給項(xiàng)目的兩側(cè)

align-items
設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式
flex-start交叉軸起點(diǎn)對(duì)齊
flex-end交叉軸終點(diǎn)對(duì)齊
center交叉軸中心對(duì)齊
stretch項(xiàng)目高度充滿容器
baseline基線對(duì)齊

flex-direction
設(shè)置主軸方向
column從上到下
column-reverse從下到上
row代表主軸從左到右
row-reverse從右到左

flex-flow  
flex-direction和flex-wrap的簡(jiǎn)寫 默認(rèn)row nowrap

flex-wrap
如果元素過(guò)多蛮浑,默認(rèn)情況不換行,需要手動(dòng)設(shè)置
wrap換行后高度均分容器高度绢慢。默認(rèn)灿渴,但是換行后,有幾行就會(huì)有幾個(gè)主軸
wrap-reverse換行后上下順序顛倒
nowrap不換行

align-content
當(dāng)有多條主軸的情況下胰舆,設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式
flex-start/flex-end/center/space-between/space-around/stretch
針對(duì)多條主軸的設(shè)置方式骚露,對(duì)單軸沒(méi)用


針對(duì)單個(gè)元素設(shè)置的
flex-grow:占用空間(可以寫占幾份)
flex-shrink:縮小比例
flex-basis設(shè)置項(xiàng)目在主軸上占據(jù)空間,可以用%
align-self單獨(dú)設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式
(auto | flex-start | flex-end | center | baseline | stretch)
order設(shè)置序號(hào)缚窿,排序















最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末棘幸,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子倦零,更是在濱河造成了極大的恐慌误续,老刑警劉巖吨悍,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蹋嵌,居然都是意外死亡育瓜,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門栽烂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)躏仇,“玉大人,你說(shuō)我怎么就攤上這事腺办⊙媸郑” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵怀喉,是天一觀的道長(zhǎng)书妻。 經(jīng)常有香客問(wèn)我,道長(zhǎng)磺送,這世上最難降的妖魔是什么驻子? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任灿意,我火速辦了婚禮估灿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘缤剧。我一直安慰自己馅袁,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布荒辕。 她就那樣靜靜地躺著汗销,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抵窒。 梳的紋絲不亂的頭發(fā)上弛针,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音李皇,去河邊找鬼削茁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛掉房,可吹牛的內(nèi)容都是我干的茧跋。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼卓囚,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼瘾杭!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起哪亿,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤粥烁,失蹤者是張志新(化名)和其女友劉穎贤笆,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讨阻,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡苏潜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了变勇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恤左。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖搀绣,靈堂內(nèi)的尸體忽然破棺而出飞袋,到底是詐尸還是另有隱情,我是刑警寧澤链患,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布巧鸭,位于F島的核電站,受9級(jí)特大地震影響麻捻,放射性物質(zhì)發(fā)生泄漏纲仍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一贸毕、第九天 我趴在偏房一處隱蔽的房頂上張望郑叠。 院中可真熱鬧,春花似錦明棍、人聲如沸乡革。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)沸版。三九已至,卻和暖如春兴蒸,著一層夾襖步出監(jiān)牢的瞬間视粮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工橙凳, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蕾殴,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓痕惋,卻偏偏與公主長(zhǎng)得像区宇,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子值戳,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

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

  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,484評(píng)論 0 6
  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,530評(píng)論 0 26
  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案议谷? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評(píng)論 1 92
  • 傳統(tǒng)的網(wǎng)頁(yè)布局基于盒裝模型,使用display堕虹,position卧晓,float屬性來(lái)達(dá)成各種布局芬首。對(duì)于一些特殊的布局...
    exialym閱讀 2,636評(píng)論 0 11
  • 在今天的社會(huì)郁稍,重視讀書的人很多,但能夠做到的胜宇,卻不多耀怜。 對(duì)于許多人來(lái)說(shuō),讀書是一件想做而做不下去的事桐愉。 他們買書如...
    草蒙茸閱讀 237評(píng)論 0 2