弹性盒模型（Flexible Box Moudle）

Flexbox 是什么呢？

就 W3C 官方给到的解释是，这是设计来实现更复杂的版面布局。

那我自己对他的定义是，Flexbox 从本质上就是一个 Box-model 的延伸，我们都知道 Box-model 定义了一个元素的盒模型，然而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系。

而不需要去用一些很 cheat 的做法，去 hack 一些本来其实不应该用来做版面布局的属性。

Flexible boxes盒子按照宽和高分出了以下 8 点：

• 水平的主轴: main axis
• 垂直的纵轴:cross axis
• 纵轴的开始位置和边框的交点: cross start
• 纵轴的结束位置和边框的交点: cross end
• 主轴的开始位置和边框的交点: main start
• 主轴的结束位置和边框的交点: main end
• 单个项目占据主轴的空间距离: main axis
• 单个项目占据纵轴的空间距离: cross axis

总之，我们的弹性盒模型就是让我们的实现响应式布局更加优雅

can I use测试兼容性的网站

1. 语法

1.1语法基础概

任何一个容器都可以指定为Flex布局。

.box{ display: flex; }

行内元素也可以使用Flex布局。

.box{ display: inline-flex; }

同时需要注意，在不用的浏览器中，我们还需要在前面加上对应的浏览器前缀。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1.2弹性 容器属性设置

以下6个属性设置在容器上。

• flex-direction——设置主轴方向，确定子元素排列方式
• flex-wrap——当弹性子元素超出容器范围时是否换行
• flex-flow——flex-direction和flex-wrap的快捷方式，复合属性
• justify-content——主轴上的对齐方式
• align-items——侧轴上的对齐方式
• align-content-侧轴有空白时，侧轴的对齐方式

1.2.1 flex-direction属性

flex-direction 属性决定主轴的方向（即项目的排列方向），确定子元素排列方式。

属性值含义row（默认值）主轴为水平方向，起点在左端。row-reverse主轴为水平方向，起点在右端。column主轴为垂直方向，起点在上沿。column-reverse主轴为垂直方向，起点在下沿。

1.2.2 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。

flex-wrap属性定义，如果一条轴线排不下，如何换行。

1.nowrap（默认）：不换行。 

2.wrap：换行，第一行在上方。 

3.wrap-reverse：换行，第一行在下方。 

1.2.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box { flex-flow: <flex-direction> || <flex-wrap>;}

1.2.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box { justify-content: flex-start | flex-end | center |space-between |space-around;}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

属性值含义flex-start（默认值）左对齐flex-end右对齐center居中space-between两端对齐，项目之间的间隔都相等。space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

space-around均匀分布，第一个弹性子元素的左侧的宽度是间隔宽度的1/2

1.2.5 align-items属性

align-items属性定义项目在侧轴（交叉轴）上如何对齐。

box { align-items: flex-start | flex-end | center | baseline | stretch;}

属性值含义flex-start交叉轴的起点对齐。flex-end交叉轴的终点对齐。center交叉轴的中点对齐。baseline项目的第一行文字的基线对齐。stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。

1.2.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box { align-content: flex-start | flex-end | center |space-between |space-around | stretch;}

--flex-start与交叉轴的起点对齐。flex-end与交叉轴的终点对齐。center与交叉轴的中点对齐。space-between与交叉轴两端对齐，轴线之间的间隔平均分布。space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）轴线占满整个交叉轴。

1.3 弹性子元素的属性

以下6个属性设置在项目上。

• order——控制弹性容器里子元素的顺序
• flex-grow——设置弹性子元素的扩展比率
• flex-shrink——设置弹性子元素的收缩比率
• flex-basis——指定弹性子元素伸缩前的默认大小值，相当于width和height属性
• flex——flex-grow，flow-shrink和flex-basis属性的复合属性
• align-self——允许独立的弹性子元素覆盖弹性容器的默认对齐方式（align-items）

1.3.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item { order: <integer>;}

1.3.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item { flex-grow: <number>;/* default 0 */}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

1.3.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item { flex-shrink: <number>;/* default 1 */}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

1.3.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item { flex-basis: <length> | auto;/* default auto */}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

补充：

flex-basis:flex-basis可以理解为我们给子元素设置的宽度。

默认值是auto,宽度设置为auto时，盒子的宽度取决你们元素的宽度。

1.3.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

补充： 

grow和shrink是一对双胞胎，grow表示伸张因子，shrink表示是收缩因子。

grow在flex容器下的子元素的宽度和比容器和小的时候起作用。

grow定义了子元素的宽度增长因子，容器中除去子元素之和剩下的宽度会按照各个子元素的gorw值进行平分加大各个子元素上。

属性值含义计算容器还剩空间available_space(容器还剩的空间）=container_size(容器宽度)-flex_item_total(子元素宽度之和)计算增长单位grow_unit(增长单位)=available_space/flex_grow_total(子元素增长因子之和)得到子元素的宽度flex-item-width(子元素计算得到的宽度)=flex-basis+grow-unit*flex-grow

上面例子的计算

container-size=480px; flex-item-total=100*3=300px;flex-grow-total=3+2+1=6available_space=480-300=180px; grow_unit=180/6=30px; 子元素1的宽度为：flex_item_width1=100+3*30=190px;子元素2的宽度为：flex_item_width1=100+2*30=160px; 子元素3的宽度为：flex_item_width1=100+30=130px;

shrink则是在宽度和比容器宽度大时候，才有用。按照shrink的值减去相应大小得到子元素的值。

公式：

overflow_space(溢出的宽度)

--计算溢出的宽度overflow-space=flex-item-total(子元素basis宽度之和)-container_width(容器宽度)得到计算的子元素的宽度item-basis:子元素设置的flex-basis；item-shrink:子元素的flex-shrink；item-shrink-sum:所有子元素flex_shrink的和。flex_item_width(计算的子元素的宽度)=item-basis --(overflow-space*(item-shrink/item-shrink-sum))

container-width=480px; item-shrink分别为3，2，1.item-basis=200px; overflow-space=120px; 则： flex_item1_width=200-(120*(3/6))=140px; flex_item2_width=200-(120*(2/6))=160px; flex_item3_width=200-(120*(1/6))=180px;

1.3.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

2.实战

flexbox菜单项目的实战

代码body部分

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>Flexbox响应式菜单</title>

<link rel="stylesheet" href="css/normalize.css" />

<link rel="stylesheet" href="css/begin.css" />

</head>

<body>

<ul class="menu">

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Javascript</a></li>

<li><a href="#">jquery</a></li>

<li><a href="#">node.js</a></li>

<li><a href="#">vue.js</a></li>

</ul>

</body>

</html>

css部分

.menu

{

list-style-type: none;

padding: 0;

margin: 0;

display: flex;

flex-flow: row wrap;

}

.menu li{

height: 40px;

text-align: center;

line-height: 40px;

flex: 1 1 100%;

}

.menu li:nth-child(1){

background-color: #39ADD1;

}

.menu li:nth-child(2){

background-color: #3079AB;

}

.menu li:nth-child(3){

background-color: #982551;

}

.menu li:nth-child(4){

background-color: #E15258;

}

.menu li:nth-child(5){

background-color: #CC6699;

}

.menu li:nth-child(6){

background-color: #52AC43;

}

.menu li a{

text-decoration: none;

color: #fff;

}

@media only screen and (min-width: 480px) {

.menu li{

flex: 1 1 50%;

}

}

@media only screen and (min-width: 768px) {

.menu{

flex-flow: row nowrap;

}

}

在不同的窗口分辨率下

参考：http://blog.csdn.net/mr_lp/article/details/50966842

同时给大家推荐几个网站。

• 无耻的我，自己占一个坑
• 18个学习 flexbox 的优质资源
• Flexbox模拟器
• FLEXBOX小游戏

弹性盒模型（Flexible Box Moudle）

该模型用于决定元素在盒子中的分布方式以及处理盒子的可用空间。这与XUL（Firefox浏览器的用户交互语言）相似，其他语言也使用相同的盒模型。如XAML，GladeXML等。通过弹性盒模型，可以轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

兼容性：：弹性盒模型规范是W3C标准化组织于2009年发布的，目前还没有主流浏览器对其进行支持，不过采用Webkit和Mozilla渲染引擎的浏览器都自定义了一套私有属性，用来支持弹性盒模型。

• 采用Webkit渲染引擎的浏览器主要包括Safari和Chrome浏览器，该引擎支持以-webkit为前缀的私有属性。
• Mozilla渲染引擎的浏览器主要包括Firefox浏览器，该引擎支持以-moz为前缀的私有属性。

相关属性： 

box-align：定义子元素在盒子垂直方向上的空间分配方式 

box-direction：定义盒子的显示顺序 

box-flex：定义子元素在盒子内的自适应尺寸 

box-flex-group：定义自适应子元素群组 

box-lines：定义子元素分列显示 

box-ordinal-group:定义子元素在盒子内的显示位置 

box-orient:定义盒子分部的坐标轴 

box-pack：定义子元素在盒子内水平方向的空间分配方式

box-orient属性

  该属性可用于定义盒子元素内部的流动布局方向.在使用弹性盒子模型时，需要先把父容器的display属性设置为box或者inline-box。 

语法：语法：

box-orient：horizontal| vertail|inline-axis| block-axis| inherit

取值简单说明：

• horizontal：盒子元素从左到右在一条水平线上显示它的子元素。
• vertail：盒子元素从上到下在一条垂直线上显示它的子元素。
• inline-axis：盒子元素沿着内联轴显示它的子元素。
• block-axis：盒子元素沿着块轴显示它的子元素。

box-direction属性

box-direction属性可以改变盒子元素中内部元素的流动顺序，该属性基本语法：

box-direction：normal | reverse | inherit

取值简单说明：

• normal：正常显示顺序，即如果盒子元素的box-origent属性值为horizontal，则其包含的子元素按照从左到右的顺序显示，即每个子元素的左边总是靠近前一个子元素的右边；如果盒子元素的box-origent属性值设置为vertical，则其包含的子元素按照从上到下的顺序显示。
• reverse：反向显示，盒子所包含的子元素的显示顺序将于normal相反。
• inherit：继承上级元素的显示顺序。
• 
  

box-ordinal-group属性

  box-direction属性可以改变盒子内部元素的流动顺序，而box-ordinal-group属性能够设置每个子元素在盒子中的具体显示位置，语法如下：

box-ordinal-group：<integer>

取值说明：

属性值是一个自然数，从1 开始，用来设置子元素的位置符号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下，子元素将根据元素的位置进行排列。 

注意：如果没有指定box-ordinal-group属性值的子元素，则其序号默认都为1，并且序号相同的元素将按照他们在文档中的加载的顺序进行排列。