1.前言
CSS3中引入的布局模式Flexbox布局，主要是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（适配所有类型的现实设备和屏幕大小）。
Flexbox布局功能主要有以下几点：
2.Flexbox模型中术语：
1.主轴和侧轴 旧版本： box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本） inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本） 混合版本： flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本） inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本） 最新版本： flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本） inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本） Flexbox布局的语法规范经过多年的变更，版本众多，浏览器对语法支持度也不同，理智分清对应版本下的规范写法！！！ 伸缩容器：通过设置display属性将一个元素变成伸缩容器，其子元素会自动变成伸缩项目： 伸缩流方向：指定伸缩容器主轴的伸缩流方向 伸缩行换行：指定伸缩项目是否沿着侧轴排列 主轴对齐方式：指定伸缩项目沿主轴对齐方式，包括左对齐、中间对齐、右对齐、两端对齐和扩散对齐。（justify-content…） 侧轴对齐方式：指定伸缩项目沿侧轴的对齐方式，包括顶边对齐、中间对齐、底部对齐、基线对齐和伸缩项目拉伸填充整个伸缩容器。 单个伸缩项目对齐方式：类似于侧轴对齐方式属性，主要用来设置伸缩项目在侧轴的对齐方式，覆盖伸缩项目在伸缩容器中侧轴的对齐方式。 伸缩项目行（堆栈伸缩行）对齐方式：只有伸缩容器设置flex-wrap为wrap时，并且没有足够的空间把伸缩项目放在同一行中。这个属性只有伸缩项目时有多行时才生效。 显示顺序：重置伸缩项目的现实顺序。 伸缩性：控制伸缩项目在伸缩容器中扩展或收缩伸缩项目的宽度，用来填充伸缩容器的额外空间。 那么，问题来了！你看完上面的归纳晕不晕？就问你晕不晕？反正我是晕了(◎﹏◎) 1.伸缩容器display(用于伸缩容器) display:flex | inline-flex; flex：块伸缩容器 注意：CSS的columns在伸缩容器上没有效果；float、clear和vertical-align在伸缩项目上没有效果。 2.伸缩流方向flex-direction(用于伸缩容器) flex-direction：row | row-reverse | column | column-reverse ; row：在ltr排版方式下从左向右排列，在rtl排版方式下从右向左排列 主要用来创建主轴，从而定义 了伸缩项目放置在伸缩容器的方向 3.伸缩换行flex-wrap(用于伸缩容器) flex-wrap：nowrap | wrap | wrap-reverse nowrap：伸缩容器单行显示，在ltr和rtl排版方式下按对应方向排列； 主要用来定义伸缩容器里是单行显示还是多行显示，侧轴的方向决定了新行堆放的方向 4.伸缩流方向和换行flex-flow(用于伸缩容器) flex-flow：<’flex-direction’> || <’flex-wrap’> 是伸缩流方向flex-direction和伸缩行换行flex-wrap的缩写版本 同时定义了伸缩容器的主轴和侧轴。 5.主轴对齐justify-content(用于伸缩容器) justify-content：flex-start | flex-end | center | space-between | space-around flex-start：伸缩项目向一行的起始位置靠齐 主要用来定义伸缩项目沿着主轴线的对齐方式。 6.侧轴对齐align-items(用于伸缩容器)和align-self(用于伸缩项目) 设置伸缩项目在侧轴的对齐方式有两种。一种是伸缩项目行在侧轴的对齐方式，由属性align-items控制；另一种是伸缩项目自身在侧轴的对齐方式，主要由属性align-self控制 align-items：flex-start | flex-end | center | baseline | strecth flex-start：伸缩项目在侧轴起点边的外边距紧靠在该行在侧轴起始边 7.堆栈伸缩行align-content align-content会改变flex-wrap的行为。与align-items相似，但不是对齐伸缩项目，对齐的是伸缩行。 align-content：flex-start | flex-end | center | space-between | space-around | stretch flex-start：各行向伸缩容器的起点位置堆叠 这个属性只有伸缩项目有多行时才生效，在flex-wrap为wrap时，并且没有足够的空间把伸缩项目行放在同一行中。该属性对每一行起作用而不是每个伸缩项目。 8.伸缩性flex 设置属性flex的伸缩容器会等比地按照各伸缩项目的扩展比率分配额外的空间，也会按照收缩比率缩小各伸缩项目以避免伸缩项目溢出伸缩容器 flex：none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] flex-grow：扩展比率 flex属性可以用来指定可伸缩长度的部件：扩展比率、收缩比率和伸缩基准值 9.显示顺序order order : number 通过order属性来改变伸缩项目出现在源文档的次序，从序号最小的组开始布局 应用：圣杯布局！顺序重组，还实现了中间列的等高效果以及页脚的黏附效果 总结：主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型！除此之外，还有更头疼的是浏览器兼容性，需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。
- 主轴、主轴方向<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPqO6yezL9cjdxve1xNb31uGjrMnsy/XP7sS/1vfSqtHY18XV4sz11uG9+NDQsry+1qOsPHN0cm9uZz61q8rHo6Gyu9K7tqjKx8uuxr21xKOsyKG+9tPaanVzdGlmeS1jb250ZW50yvTQ1KOsyKHWtc6qY29sdW1uyrGjrNb31uG3vc/yzqrX3c/ytcShozwvc3Ryb25nPjxiciAvPg0KLSA8c3Ryb25nPtb31uHG8LXjoaLW99bh1tW14zwvc3Ryb25nPqO6yezL9c/uxL+3xdbD1NrJ7Mv1yN3G98TatNPW99bhxvC148/y1vfW4dbVteO3vc/yoaM8YnIgLz4NCi0gPHN0cm9uZz7W99bhs6S2yKGi1vfW4bOktsjK9NDUPC9zdHJvbmc+o7o8c3Ryb25nPsnsy/XP7sS/1NrW99bht73P8rXEv+22yLvyuN+2yL7NysfP7sS/tcTW99bhs6S2yDwvc3Ryb25nPqOsxMS49r/ttsi78rjftsjK9NDUttTXxdb31uG+zdPJy/y+9raooaM8L3A+DQo8c3Ryb25nPrLg1uGhorLg1uG3vc/yPC9zdHJvbmc+o7rT69b31uG0udaxtcS3vc/yo6zIob7209rW99bht73P8qGjIDxzdHJvbmc+suDW4cbwteOhorLg1uHW1bXjPC9zdHJvbmc+o7rM7sL6z+7Ev7XEyezL9dDQtcTF5NbDtNPI3cb3tcSy4NbhxvC147Hfv6rKvKOszfmy4Nbh1tW147HfveHK+KGjIDxzdHJvbmc+suDW4bOktsihorLg1uGzpLbIyvTQ1Dwvc3Ryb25nPqO6PHN0cm9uZz7J7Mv1z+7Ev9TasuDW4be9z/K1xL/ttsi78rjftsi+zcrHz+7Ev7XEsuDW4bOktsg8L3N0cm9uZz6jrMTEuPa/7bbIu/K437bIyvTQ1LbU18Wy4Nbhvs3Tycv8vva2qKGjDQo8cD48c3Ryb25nPjIuyezL9cjdxve6zcnsy/XP7sS/o7o8L3N0cm9uZz48L3A+DQo8cD48c3Ryb25nPsnsy/XI3cb3o7o8L3N0cm9uZz7NqLn9ZGlzcGxhecr00NTP1Mq+tdi4+NK7uPbUqsvYyejWw86qZmxleLvyaW5saW5lLWZsZXijrNXiuPbI3cb3vs3Kx9K7uPbJ7Mv1yN3G9yHJ6NbDzqpmbGV4tcTI3cb3sbvk1si+zqrSu7j2v+m8ttSqy9ijrMno1sPOqmlubGluZS1mbGV4tcTI3cb3vauxu+TWyL7OqtK7uPbQ0MTa1KrL2KGjPC9wPg0KPHA+PHN0cm9uZz7J7Mv1z+7Ev6O6PC9zdHJvbmc+0ru49snsy/XI3cb3tcTE2sjdvt/T0MHjuPbS1MnPtcTJ7Mv1z+7Ev6OsyezL9cjdxve1xMO/uPbX09Sqy9i2vLvhs8nOqtK7uPbJ7Mv1z+7Ev6GjPC9wPg0KPHA+PHN0cm9uZz4zLsnsy/XI3cb3tcTK9NDUo7o8L3N0cm9uZz48L3A+DQo8c3Ryb25nPsnsy/XB97e9z/Kjujwvc3Ryb25nPta4yezL9cjdxve1xNb31uG3vc/yo6y+9raowcvJ7Mv1z+7Ev7fF1sPU2snsy/XI3cb3tcS3vc/yoaM8c3Ryb25nPs2ouf1mbGV4LWRpcmVjdGlvbsr00NTAtMno1sOjrMSsyM/Wtc6qcm93oaM8L3N0cm9uZz7J7Mv1wfe3vc/yus3K6dC0xKPKvdPQudjPtaOsyezL9c/uxL+4+b7dyunQtMSjyr21xLe9z/KyvL7WoaMgPHN0cm9uZz7J7Mv10NC7u9DQPC9zdHJvbmc+o7rJ6NbDyezL9cjdxve1xMnsy/XP7sS/ysc8c3Ryb25nPrWl0NDP1Mq+u7nKx7bg0NDP1Dwvc3Ryb25nPsq+o6zS1Lywvva2qLLg1uG1xLe9z/KhozxzdHJvbmc+zai5/WZsZXgtd3JhcMr00NTAtMno1sPJ7Mv1z+7Ev8rHt/G7u9DQo6zErMjPzqpub3dyYXChozwvc3Ryb25nPiA8c3Ryb25nPsnsy/W3vc/y0+u7u9DQPC9zdHJvbmc+o7rJ7Mv10+u7u9DQyvTQ1GZsZXgtZmxvd82syrHJ6Laowcs8c3Ryb25nPsnsy/XB97e9z/JmbGV4LWRpcmVjdGlvbrrNyezL9bu70NBmbGV4LXdyYXDBvbj2yvTQ1Dwvc3Ryb25nPqGjysfBvbj2yvTQ1LXEy/XQtKOsvva2qMHLyezL9cjdxve1xNb31uG6zbLg1uGhoyA8c3Ryb25nPtb31uG21MbrPC9zdHJvbmc+o7rJ6NbDyezL9cjdxve1scew0NDJ7Mv1z+7Ev9Ta1vfW4be9z/K1xLbUxuu3vcq9o6zWuLaoyOe6ztTayezL9c/uxL/Wrrzkt9ayvMnsy/XI3cb3tu7N4r/VvOShoyA8c3Ryb25nPrLg1uG21MbrPC9zdHJvbmc+o7rJ7Mv1z+7Ev7/J0tTU2snsy/XI3cb3tbHHsNDQtcSy4Nbhyc+9+NDQttTG67XEt73KvaGjIDxzdHJvbmc+ttHVu8nsy/XQ0Dwvc3Ryb25nPqO6tqjS5cnsy/XI3cb31tDJ7Mv1z+7Ev9DQ1Nqy4NbhtcS21Mbrt73KvaOswODLxtPasuDW4bbUxuujrNa7sru5/crH08PAtL/Y1sbJ7Mv1z+7Ev9DQ1NqyvL7W1uG1xLbRt8W3vcq9oaMNCjxwPjxzdHJvbmc+NC7J7Mv1z+7Ev7XEyvTQ1KO6PC9zdHJvbmc+PC9wPg0KPHA+0ru49snsy/XP7sS/ysfSu7j2yezL9cjdxve1xNfT1KrL2KGjyezL9cjdxvfW0LXEzsSxvtKysbvK086q0ru49snsy/XP7sS/oaPJ7Mv1z+7Ev9bQxNrI3dPrxtXNqMH30rvR+aGj09C8uLj2yvTQ1L/J0tS199X7yezL9c/uxL+1xNDQzqqjujwvcD4NCjxzdHJvbmc+z9TKvsuz0PI8L3N0cm9uZz46v8nS1M2ouf3J7Mv1z+7Ev7XEz9TKvsuz0PLQ3rjEyezL9c/uxL/U2tKzw+bW0M/Uyr7Ls9Dyo6zSsr/J0tS21Mnsy/XP7sS/vfjQ0MXF0PLX6brPoaMgPHN0cm9uZz6y4NbhttTG6zwvc3Ryb25nPqO609DBvdbWo6w8c3Ryb25nPmFsaWduLWl0ZW1zus1hbGlnbi1zZWxmyvTQ1Dwvc3Ryb25nPqOhYWxpZ24taXRlbXO/ydLU08PAtMno1sPJ7Mv1yN3G99bQsPzAqMTkw/vJ7Mv1z+7Ev7XEy/nT0M/uxL+1xLbUxuu3vcq9o7u2+GFsaWduLXNlbGbW99Kq08PAtLWltsC1xMnsy/XP7sS/yc+4stC0xKzIz7XEttTG67e9yr2ho9TaxOTD+8nsy/XP7sS/1tCjrGFsaWduLXNlbGa1xNa108DUttPrxuS52MGqtcTJ7Mv1yN3G97XEYWxpZ24taXRlbXO1xNa1z+DNrKGjIDxzdHJvbmc+yezL9dDUPC9zdHJvbmc+o7q/ydLUvavJ7Mv1yN3G97XEtu7N4r/VvOS31reiuPjG5Mnsy/XP7sS/u/K9q8v8w8fL9dCh0tS3wNa5yezL9c/uxL/S57P2oaMgPHN0cm9uZz7J7Mv10NA8L3N0cm9uZz6jusnsy/XP7sS/0djXxcnsy/XI3cb3tcTSu7j2yezL9dDQtqjOu6GjyezL9cjdxve/ydLUyse1pdDQtcSjrNKyv8nS1MrHtuDQ0LXEoaPG5Nb30qrTyWZsZXgtd3JhcMr00NS+9raooaMNCjxoMiBpZD0="3flexbox模型语法规范">3.Flexbox模型语法规范
4.Flexbox模型语法变更：
5.新版本Flexbox模型
inline-flex：内联伸缩容器
column:类似于row，不过是从上到下排列
row-reverse和column-reverse是与对应的row和column排列方向相反
wrap：伸缩容器多行显示，在ltr和rtl排版方式下按对应方向排列；
wrap-reverse：伸缩容器多行显示，但在ltr排版下，伸缩项目从右向左排列；rtl排版下，伸缩项目从左向右排列（和wrap相反）
flex-end：伸缩项目向一行的结束为止靠齐
center：伸缩项目向一行的中间位置靠齐
space-between：伸缩项目会平均分布在行里，第一个和最后一个伸缩项目靠着开始和结束位置
space-around：伸缩项目会平均分布在行里，两端保留一半的空间
align-self：flex-start | flex-end | center | baseline | strecth
flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边
center：伸缩项目的外边距盒在该行的侧轴上居中放置
baseline：伸缩项目根据伸缩项目的基线对齐
strech：默认值，伸缩项目拉伸填充整个伸缩容器
flex-end：各行向伸缩容器的终点位置堆叠
center：伸各行向伸缩容器的中间位置堆叠
space-between：各行在伸缩容器中平均分布
space-around：各行在伸缩容器中平均分布，在两边各有一半空间
strech：默认值，各行将会伸展以占用额外的空间
flex-shrink：收缩比率
flex-basis：伸缩基准值
