布局的傳統(tǒng)解決方案昵骤，基于盒狀模型璧亮，依賴 display屬性 + position屬性 + float屬性携龟。
Flex瀏覽器支持情況如下：
8712d713c7d0b884a5cb9770efc422b4.jpg
1螟凭、容器指定為Flex布局
display: flex;
display: inline-flex;
display: -webkit-flex; /* Safari Webkit內(nèi)核的瀏覽器俄烁，必須加上-webkit前綴。/
注意：設(shè)為Flex布局以后海诲，子元素的float繁莹、clear和vertical-align屬性將失效
2、容器屬性
flex-direction: row | row-reverse | column | column-reverse;
0cbe5f8268121114e87d0546e53cda6e.png
flex-wrap: nowrap | wrap | wrap-reverse;
不換行特幔。| 換行咨演，第一行在上方。| 換行蚯斯，第一行在下方薄风。
flex-flow: <flex-direction> || <flex-wrap>;//flex-direction和flex-wrap簡寫，默認值row nowrap拍嵌。
justify-content: flex-start | flex-end | center | space-between | space-around;
c55dfe8e3422458b50e985552ef13ba5.png
align-items: flex-start | flex-end | center | baseline | stretch;
2b0c39c7e7a80d5a784c8c2ca63cde17.png
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
f10918ccb8a13247c9d47715a2bd2c33.png
3遭赂、項目屬性
order：<integer>;排列順序，數(shù)值越小越靠前横辆，默認為0撇他。
flex-grow: <number>; / 放大比例 default 0 /
flex-shrink: <number>; /縮小比例 default 1 /
flex-basis: <length> | auto; /項目占據(jù)的主軸空間 default auto /
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]/flex-grow, flex-shrink 和 flex-basis簡寫。后兩個可選狈蚤±Ъ纾快捷值auto (1 1 auto) 和 none (0 0 auto)。默認值為0 1 auto/
align-self: auto | flex-start | flex-end | center | baseline | stretch;/對齊方式*/
