前言：Flex布局能快速實(shí)現(xiàn)常見(jiàn)的幾種網(wǎng)頁(yè)布局并炮，如九宮格類(lèi)產(chǎn)品介紹頁(yè)面，網(wǎng)站雙飛翼布局，手機(jī)頁(yè)面設(shè)計(jì)等钉赁。
關(guān)于Flex布局具體可參考阮一峰博客
1、網(wǎng)頁(yè)布局
傳統(tǒng)的網(wǎng)頁(yè)布局通承基于盒狀模型你踩，通常是對(duì)display( inline-block 或 block等設(shè)置 ), position (父級(jí)relative, 子元素absolute ), float 及 clear-fix清除浮動(dòng)等屬性，負(fù)margin等設(shè)置來(lái)實(shí)現(xiàn)各種布局及居中等。
2姓蜂、Flex 布局
W3C 于2015年納入標(biāo)準(zhǔn)的一種彈性布局模型按厘，由彈性盒display: flex包裹內(nèi)部的items。其于方向無(wú)關(guān)钱慢，布局方向由主軸逮京，cross axis進(jìn)行設(shè)置，可實(shí)現(xiàn)空間自動(dòng)分配束莫，自動(dòng)對(duì)齊懒棉。
語(yǔ)法及屬性設(shè)置：
a: Flex container屬性設(shè)置
flex-direction：設(shè)置主軸的方向，即設(shè)置內(nèi)部items的排列是按行還是按列進(jìn)行排列览绿，屬性值為row, row-reverse(倒序), column, column-reverse策严。
flex-wrap: 設(shè)置根據(jù)寬度是否換行，屬性值為nowrap 或 wrap.
flex-flow: 上述兩個(gè)值的簡(jiǎn)寫(xiě)饿敲，默認(rèn)為row nowrap
justify-content: 定義內(nèi)部items在container內(nèi)水平軸的位置妻导，屬性值為flex-start(左對(duì)齊)，flex-end(右對(duì)齊), center(左右居中), space-between(空白位于items之間), space-around(空白環(huán)繞于items怀各，類(lèi)比word的文字環(huán)繞)
align-items: 定義內(nèi)部items在container內(nèi)垂直軸的位置倔韭，屬性值為flex-start(頂部對(duì)齊)，flex-end(底部對(duì)齊), center(垂直居中),
b：Flex items屬性設(shè)置
flex-grow: 增長(zhǎng)比例瓢对，設(shè)置不同items占據(jù)的空白空間份額寿酌，數(shù)字
flex-shrink: 收縮比例，設(shè)置不同items收縮的比例硕蛹。
flex-basis: 設(shè)置items默認(rèn)占據(jù)的大小醇疼。
flex: 上面三個(gè)值的集合
order: 根據(jù)數(shù)字來(lái)設(shè)置不同items的排序順序
3. 產(chǎn)品介紹 & 網(wǎng)站 & 手機(jī)頁(yè)面布局代碼實(shí)現(xiàn)
產(chǎn)品介紹
網(wǎng)站
手機(jī)頁(yè)面
