勾笆，? ? flex 布局至今為止還是一個令我十分頭疼的布局敌蚜，內容不多，不難窝爪，可是我就是不會(哭）弛车。我不會不是因為它游多難齐媒，只是用慣了浮動布局，還不好適應這種百分比布局纷跛。歸根結底喻括，flex布局還是實現(xiàn)響應式頁面以及屏幕適配的利器，同時也是移動Web 頁面最常用的布局方式之一贫奠。
? ? Flex概述：
????flex 布局是 Flexible Box 的縮寫唬血，也可以稱為彈性布局或者彈性盒模型。flex布局最大的特點就是無需對元素設置固定的寬和高叮阅，其位置和大小會隨著父元素或者瀏覽器的狀態(tài)自動適應刁品，同時還新增了水平居中和垂直居中等方案。任何一個網(wǎng)頁元素都可以指定為Flex 布局浩姥，這個通常叫做容器元素。下面來對flex布局的屬性做一個總結：
? ? 一状您、flex 容器屬性：
? ? 對于某個容器屬性（通常稱父盒子）只要聲明了 display：flex勒叠，那么這個元素就稱為彈性容器，一個彈性容器有以下特性：
?（1）每個彈性容器都有兩根軸：主軸和交叉軸膏孟，兩軸之間成 90 度眯分，在默認情況下，水平方向為主軸柒桑，垂直方向為交叉軸弊决；? ?
（2）每根軸都有起點和終點，這對于后續(xù)元素的對齊屬性非常重要魁淳；? ?
（3）彈性容器中的所有子元素稱為彈性元素飘诗，彈性元素永遠沿主軸排列；? ?
（4）彈性元素也可以通過設置 display：flex 稱為另一個彈性容器界逛，形成嵌套關系昆稿。因此一個元素既可以是彈性容器，也可以是彈性元素
二息拜、彈性容器屬性：
? ? 1溉潭、flex-direction：該屬性決定主軸的方向。少欺。
取值：
? ? （1）row ：表示設置主軸為水平方向喳瓣，從左到右，該值為默認值赞别；
? ? （2）row-reverse：表示設置主軸為水平方向畏陕，從右到左；
? ? （3）column ：表示設置主軸為垂直方向氯庆，從上到下蹭秋；
? ? （4）column-reverse ：表示設置主軸為垂直方向扰付，從下到上。
? ? 2仁讨、flex-wrap：該屬性決定如果一條軸線排列時內容超出換行羽莺。
? ? （1）nowrap ：表示單行顯示，不換行洞豁，該值為默認值盐固；
? ? （2）wrap：表示內容超出容器寬度時換行顯示，第一行在上方丈挟；
? ? （3）wrap-reverse ：表示內容超出容器寬度時換行顯示刁卜，但是從下往上開始，也就是第一行在最下方曙咽，最后一行在最上方蛔趴。
? ? 3、flex-flow：該屬性是 flex-direction 和 flex-wrap 的縮寫例朱，即一個屬性可以實現(xiàn)設置兩個屬性的功能孝情。
flex-flow ：是一個復合屬性，由 flex-direction 和 flex-wrap 共同組成洒嗤，用空格隔開箫荡，相當于規(guī)定了 flex 布局的 “工作流” （flow），但是不建議這樣寫渔隶，分開設置會更為清晰羔挡。
? ? 4、justify-content：該屬性決定了主軸方向子元素的對齊和分布方式间唉。
? ? （1）flex-start：表示主軸方向左對齊绞灼，該值為默認值；
? ? （2）flex-end ：表示主軸方向右對齊终吼；
? ? （3）center ：表示主軸方向居中對齊镀赌；
? ? （4）space-between：表示主軸方向兩端對齊，子元素之間的間隔都相等际跪，多余的空白間距只在子元素中間區(qū)域分配商佛；
? ? （5）space-aroundL表示主軸方向距離容器兩側的間隔相等，主軸起點位置的子元素和終點位置的子元素距離容器邊框間距相等姆打，并且子元素兩側的間隔相等良姆，所以在最終效果上，容器邊緣兩側的空白只有中間空白寬度的一半幔戏。
? ? 5玛追、align-items：該屬性決定了交叉軸方向子元素的對齊和分布方式。
? ? （1）flex-start：表示子元素在容器交叉軸方向頂部對齊；
? ? （2）flex-end：表示子元素在容器交叉軸方向底部對齊痊剖；
? ? （3）center ：表示子元素在容器交叉軸方向居中對齊韩玩；
? ? （4）baseline ：表示所有子元素都相對其第一行文字的基線（字母 x 的下邊緣）對齊。
? ? （5）stretch ：表示子元素拉伸陆馁，如果主軸是水平方向找颓，且該元素若未設置高度或者把高度設置為 auto，那么子元素將會占滿整個容器的高度叮贩；如果主軸是垂直方向击狮，且該子元素若未設置寬度或者把寬度設置為 auto ，那么子元素將會占滿整個容器的寬度益老，如果設置了高度和寬度彪蓬，則按照其設置值顯示子元素，該值為默認值捺萌。
? ? 6档冬、align-content：該屬性決定了多根軸線的對齊方式。如果容器只有一根軸線桃纯，那么該屬性不起作用捣郊。
(1) flex-start：表示子元素在容器交叉軸方向頂部對齊；
(2) flex-end：表示子元素在容器交叉軸方向底部對齊慈参；
(3) center：表示子元素在容器交叉軸方向整體居中對齊；
(4) space-between ：表示子元素在容器交叉軸方向兩端對齊刮萌，剩下每一行子元素等分剩余的空間驮配；
(5) space-around ：表示子元素在容器交叉軸方向上兩側的間隔都相等，且位于起點和終點的元素距離容器邊框間隔為兩側間隔的1/2着茸；
(6) stretch：表示每一行子元素都拉伸壮锻。
三、 Flex 子元素屬性
1涮阔、order：該屬性決定子元素的排列順序猜绣；
1、order 屬性：
? ? order 用來改變某一個子元素的排序位置敬特，參數(shù)integer 是一個整數(shù)掰邢，屬性默認值為 0 ，子元素 order 值越小列越靠前伟阔，反之越大就越靠后辣之。
2、flex-grow：該屬性決定該子元素的放大比例皱炉；
felx-grow 屬性中的 grow 是拉伸的意思怀估，拉伸就是子元素所占據(jù)的空間，一般子元素沒有撐滿容器且容器有剩余空間的情況下進行分配。參數(shù) number 默認值是 0 多搀，表示不拉伸歧蕉。如果一個子元素的這個值為 2，其他子元素的這個值都為 1 時康铭，則前者占據(jù)的剩余空間將比其他子元素多一倍惯退。
3、flex-shrink：該屬性決定該子元素的縮小比例麻削；
flex-shrink 屬性中的 shrink 是收縮的意思蒸痹，和 flex-grow 屬性相反，一般在子元素撐滿容器并且子元素不發(fā)生換行呛哟，容器元素空間不足的情況下進行分配叠荠。
參數(shù) number 默認值是 1，也就是默認所有的子元素都會收縮扫责。如果設置為 0 榛鼎，則代表當前項不收縮。值越大鳖孤，收縮越多者娱。
4、flex-basis：該屬性決定了在分配多余空間之前苏揣，該元素占據(jù)的主軸空間的大谢器ⅰ；
flex-basis 屬性定義了在分配剩余空間之前平匈，子元素占據(jù)的主軸空間的大小框沟。瀏覽器根據(jù)這個屬性來計算主軸是否有多余空間，它的默認值為 auto增炭，即子元素本身大小忍燥，也可以設置具體的值。該值和 width 或者 height 屬性有著相同的效果隙姿，都表示子元素占據(jù)空間的大小梅垄，如果同時設置這兩個屬性的值，就渲染表現(xiàn)來看输玷，會忽略 width 或者 height队丝。
5、flex：該屬性是復合屬性饲嗽，由 flex-grow炭玫、flex-shrink 和 felx-basis 組成；
flex 是一個復合屬性貌虾，由 flex-grow吞加、flex-shrink、 和 flex-basis 組成，其中第二個和第三個參數(shù)是可選的衔憨。其中 none 相當于設置了 " 0 0 auto" 叶圃，auto 相當于設置為 " 1 1 auto" ，默認值為 " 0 1 auto"践图。
6掺冠、align-self：該屬性決定了該子元素與其他子元素不一樣的排列和對齊方式。
align-self 屬性決定單個子元素在交叉軸方向的對齊和對齊方式码党。該屬性和 align-items 效果很類似德崭，唯一的區(qū)別就是 align-self 多了個 auto (默認值) ， 表示繼承自容器的 align-items 屬性值揖盘，其他屬性值含義一模一樣眉厨。
