flex布局

/*! https://github.com/lzxb/flex.css */

[flex],

[flex] > *,

[flex] > [flex] {

overflow: hidden

} [flex] {

display: -webkit - box;

display: -webkit - flex;

display: -ms - flexbox;

display: flex

} [flex] > *{

display: block

} [flex] > [flex] {

display: -webkit - box;

display: -webkit - flex;

display: -ms - flexbox;

display: flex

} [flex~ = "dir:left"] { - webkit - box - orient: horizontal; - webkit - box - direction: normal; - webkit - flex - direction: row; - ms - flex - direction: row;

flex - direction: row

} [flex~ = "dir:right"] { - webkit - box - orient: horizontal; - webkit - box - direction: reverse; - webkit - flex - direction: row - reverse; - ms - flex - direction: row - reverse;

flex - direction: row - reverse; - webkit - box - pack: end

} [flex~ = "dir:top"] { - webkit - box - orient: vertical; - webkit - box - direction: normal; - webkit - flex - direction: column; - ms - flex - direction: column;

flex - direction: column

} [flex~ = "dir:bottom"] { - webkit - box - orient: vertical; - webkit - box - direction: reverse; - webkit - flex - direction: column - reverse; - ms - flex - direction: column - reverse;

flex - direction: column - reverse; - webkit - box - pack: end

} [flex~ = "main:left"] { - webkit - box - pack: start; - webkit - justify - content: flex - start; - ms - flex - pack: start;

justify - content: flex - start

} [flex~ = "main:right"] { - webkit - box - pack: end; - webkit - justify - content: flex - end; - ms - flex - pack: end;

justify - content: flex - end

} [flex~ = "main:justify"] { - webkit - box - pack: justify; - webkit - justify - content: space - between; - ms - flex - pack: justify;

justify - content: space - between

} [flex~ = "main:center"] { - webkit - box - pack: center; - webkit - justify - content: center; - ms - flex - pack: center;

justify - content: center

} [flex~ = "cross:top"] { - webkit - box - align: start; - webkit - align - items: flex - start; - ms - flex - align: start; - ms - grid - row - align: flex - start;

align - items: flex - start

} [flex~ = "cross:bottom"] { - webkit - box - align: end; - webkit - align - items: flex - end; - ms - flex - align: end; - ms - grid - row - align: flex - end;

align - items: flex - end

} [flex~ = "cross:center"] { - webkit - box - align: center; - webkit - align - items: center; - ms - flex - align: center; - ms - grid - row - align: center;

align - items: center

} [flex~ = "cross:baseline"] { - webkit - box - align: baseline; - webkit - align - items: baseline; - ms - flex - align: baseline; - ms - grid - row - align: baseline;

align - items: baseline

} [flex~ = "cross:stretch"] { - webkit - box - align: stretch; - webkit - align - items: stretch; - ms - flex - align: stretch; - ms - grid - row - align: stretch;

align - items: stretch

} [flex~ = "box:mean"] > *,

[flex~ = "box:first"] > *,

[flex~ = "box:last"] > *,

[flex~ = "box:justify"] > *{

width: 0;

height: auto; - webkit - box - flex: 1; - webkit - flex - grow: 1; - ms - flex - positive: 1;

flex - grow: 1; - webkit - flex - shrink: 1; - ms - flex - negative: 1;

flex - shrink: 1

} [flex~ = "box:first"] > :first - child,

[flex~ = "box:last"] > :last - child,

[flex~ = "box:justify"] > :first - child,

[flex~ = "box:justify"] > :last - child {

width: auto; - webkit - box - flex: 0; - webkit - flex - grow: 0; - ms - flex - positive: 0;

flex - grow: 0; - webkit - flex - shrink: 0; - ms - flex - negative: 0;

flex - shrink: 0

} [flex~ = "dir:top"][flex~ = "box:mean"] > *,

[flex~ = "dir:top"][flex~ = "box:first"] > *,

[flex~ = "dir:top"][flex~ = "box:last"] > *,

[flex~ = "dir:top"][flex~ = "box:justify"] > *,

[flex~ = "dir:bottom"][flex~ = "box:mean"] > *,

[flex~ = "dir:bottom"][flex~ = "box:first"] > *,

[flex~ = "dir:bottom"][flex~ = "box:last"] > *,

[flex~ = "dir:bottom"][flex~ = "box:justify"] > *{

width: auto;

height: 0; - webkit - box - flex: 1; - webkit - flex - grow: 1; - ms - flex - positive: 1;

flex - grow: 1; - webkit - flex - shrink: 1; - ms - flex - negative: 1;

flex - shrink: 1

} [flex~ = "dir:top"][flex~ = "box:first"] > :first - child,

[flex~ = "dir:top"][flex~ = "box:last"] > :last - child,

[flex~ = "dir:top"][flex~ = "box:justify"] > :first - child,

[flex~ = "dir:top"][flex~ = "box:justify"] > :last - child,

[flex~ = "dir:bottom"][flex~ = "box:first"] > :first - child,

[flex~ = "dir:bottom"][flex~ = "box:last"] > :last - child,

[flex~ = "dir:bottom"][flex~ = "box:justify"] > :first - child[flex~ = "dir:bottom"][flex~ = "box:justify"] > :last - child {

height: auto; - webkit - box - flex: 0; - webkit - flex - grow: 0; - ms - flex - positive: 0;

flex - grow: 0; - webkit - flex - shrink: 0; - ms - flex - negative: 0;

flex - shrink: 0

} [flex - box = "0"] { - webkit - box - flex: 0; - webkit - flex - grow: 0; - ms - flex - positive: 0;

flex - grow: 0; - webkit - flex - shrink: 0; - ms - flex - negative: 0;

flex - shrink: 0

} [flex - box = "1"] { - webkit - box - flex: 1; - webkit - flex - grow: 1; - ms - flex - positive: 1;

flex - grow: 1; - webkit - flex - shrink: 1; - ms - flex - negative: 1;

flex - shrink: 1

} [flex - box = "2"] { - webkit - box - flex: 2; - webkit - flex - grow: 2; - ms - flex - positive: 2;

flex - grow: 2; - webkit - flex - shrink: 2; - ms - flex - negative: 2;

flex - shrink: 2

} [flex - box = "3"] { - webkit - box - flex: 3; - webkit - flex - grow: 3; - ms - flex - positive: 3;

flex - grow: 3; - webkit - flex - shrink: 3; - ms - flex - negative: 3;

flex - shrink: 3

} [flex - box = "4"] { - webkit - box - flex: 4; - webkit - flex - grow: 4; - ms - flex - positive: 4;

flex - grow: 4; - webkit - flex - shrink: 4; - ms - flex - negative: 4;

flex - shrink: 4

} [flex - box = "5"] { - webkit - box - flex: 5; - webkit - flex - grow: 5; - ms - flex - positive: 5;

flex - grow: 5; - webkit - flex - shrink: 5; - ms - flex - negative: 5;

flex - shrink: 5

} [flex - box = "6"] { - webkit - box - flex: 6; - webkit - flex - grow: 6; - ms - flex - positive: 6;

flex - grow: 6; - webkit - flex - shrink: 6; - ms - flex - negative: 6;

flex - shrink: 6

} [flex - box = "7"] { - webkit - box - flex: 7; - webkit - flex - grow: 7; - ms - flex - positive: 7;

flex - grow: 7; - webkit - flex - shrink: 7; - ms - flex - negative: 7;

flex - shrink: 7

} [flex - box = "8"] { - webkit - box - flex: 8; - webkit - flex - grow: 8; - ms - flex - positive: 8;

flex - grow: 8; - webkit - flex - shrink: 8; - ms - flex - negative: 8;

flex - shrink: 8

} [flex - box = "9"] { - webkit - box - flex: 9; - webkit - flex - grow: 9; - ms - flex - positive: 9;

flex - grow: 9; - webkit - flex - shrink: 9; - ms - flex - negative: 9;

flex - shrink: 9

} [flex - box = "10"] { - webkit - box - flex: 10; - webkit - flex - grow: 10; - ms - flex - positive: 10;

flex - grow: 10; - webkit - flex - shrink: 10; - ms - flex - negative: 10;

flex - shrink: 10

}

http://lzxb.name/flex.css/ 說(shuō)明鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市唤冈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件穗泵,死亡現(xiàn)場(chǎng)離奇詭異宪郊,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)限煞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)员凝,“玉大人署驻,你說(shuō)我怎么就攤上這事〗∨” “怎么了旺上?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)糖埋。 經(jīng)常有香客問(wèn)我宣吱,道長(zhǎng),這世上最難降的妖魔是什么瞳别? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任征候,我火速辦了婚禮杭攻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘疤坝。我一直安慰自己兆解,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布跑揉。 她就那樣靜靜地躺著锅睛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪历谍。 梳的紋絲不亂的頭發(fā)上现拒,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音望侈,去河邊找鬼印蔬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛甜无,可吹牛的內(nèi)容都是我干的扛点。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼岂丘,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼陵究!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起奥帘,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤铜邮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后寨蹋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體松蒜,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年已旧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了秸苗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡运褪,死狀恐怖惊楼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秸讹,我是刑警寧澤檀咙,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站璃诀,受9級(jí)特大地震影響弧可,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜劣欢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一棕诵、第九天 我趴在偏房一處隱蔽的房頂上張望裁良。 院中可真熱鬧,春花似錦校套、人聲如沸趴久。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至灭忠,卻和暖如春膳算,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背弛作。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工涕蜂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人映琳。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓机隙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親萨西。 傳聞我的和親對(duì)象是個(gè)殘疾皇子有鹿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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