# box-flex使用说明

## 1.box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
```html
<acticle>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</acticle>
```
```css
acticle{
  display: box;
  display: -moz-box;
  display: -webkit-box;

  width: 100%;
  height: 50px;
}
acticle section{
  line-height: 50px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
  background:green;
}
```

<css-boxFlex-boxFlex1/>

&nbsp;&nbsp;&nbsp;&nbsp;必须给父容器wrap定义css属性`display:box`其子容器才可以进行划分(如果定了`display:box`则该容器则定义为了内联元素，使用`margin:0px auto`让其居中是无效的，要想使其居中只能通过它的父容器的`text-align:center`);

&nbsp;&nbsp;&nbsp;&nbsp;分别给`sectionOne`、`sectionTwo`、`sectionThree`的`box-flex`设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，`sectionOne`占居父结构宽度的3/6即300px，`sectionOne`占居父结构宽度的2/6即200px，`sectionThree`占居父结构宽度的1/6即100px。

&nbsp;&nbsp;&nbsp;&nbsp;以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？

&nbsp;&nbsp;&nbsp;&nbsp;如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配。

&nbsp;&nbsp;&nbsp;&nbsp;请看下面代码:

```html
<acticle>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</acticle>
```
```css
acticle{
  display: box;
  display: -moz-box;
  display: -webkit-box;

  width: 100%;
  height: 50px;
}
acticle section{
  line-height: 50px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:200px;
  background:green;
}
```
<css-boxFlex-boxFlex2/>

&nbsp;&nbsp;&nbsp;&nbsp;sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。

&nbsp;&nbsp;&nbsp;&nbsp;在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那？接着看

```html
<acticle>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</acticle>
```

```css
acticle{
  display: box;
  display: -moz-box;
  display: -webkit-box;

  width: 100%;
  height: 50px;
}
acticle section{
  line-height: 50px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
  /*添加margin属性*/
  margin:0 50px;
}
acticle section:nth-child(3){
  width:200px;
  background:green;
}
```
<css-boxFlex-boxFlex3/>

父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。

## 2.box属性

上面”css3弹性盒子模型之box-flex”将box-flex如何对父容器的宽度进行划分分配讲解完毕，下面在看一下父容器里面的box属性包括哪些box属性，具体属性如下代码所示：

```js
box-orient | box-direction | box-align | box-pack | box-lines
```
### a.box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：

```js
horizontal | vertical | inline-axis | block-axis | inherit
```

#### horizontal、inline-axis说明：
给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。

```html
<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>
```

```css
acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  -moz-box-orient:horizontal;
  -webkit-box-orient:horizontal;
  /*水平排列*/
  box-orient:horizontal;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}
```
<css-box-boxOrient1 />
vertical、block-axis说明：<br/>
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。

此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。

```html
<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>
```

```css
acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  -moz-box-orient:vertical;
  -webkit-box-orient:vertical;
  /*垂直排列*/
  box-orient:vertical;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  height:100px;
  background:green;
}
```
<css-box-boxOrient1 />

inherit说明：<br/>
inherit属性则是让子容器继承父容器的相关属性。

### b.box-direction
box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：
```js
normal | reverse | inherit
```

normal是默认值<br/>
按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、sectionTwo、sectionThree.

```html
<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>
```

```css
acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  /*设置mormal默认值*/
  -moz-box-direction:normal;
  -webkit-box-direction:normal;
  box-direction:normal;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}
```
<css-box-boxOrient2 />

reverse表示反转:<br/>
如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne.

```html
<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>
```

```css
acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  /*设置mormal默认值*/
  -moz-box-direction:reverse;
  -webkit-box-direction:reverse;
  box-direction:reverse;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}
```
<css-box-boxOrient3 />

### c.box-align
> box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：
```js
start | end | center | baseline | stretch
```

```html
<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>
```

```css
acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  /*设置mormal默认值*/
  -moz-box-direction:stretch;
  -webkit-box-direction:stretch;
  box-direction:stretch;
}
acticle section{
  line-height: 100px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}
```
<css-box-boxOrient4 />

|属性|说明|
|:-|:-|
|start|居顶对齐|
|end|居底对齐|
|center|居中对齐|
|stretch|拉伸，拉伸到与父容器等高|

### d.box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：<br/>
```js
start | end | center | justify
```

```html
<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>
```

```css
acticle{
  width:100%;
  height:200px;
  background: aquamarine;

  display:-moz-box;
  display:-webkit-box;
  display:box;
  
  -moz-box-pack:end;
  -webkit-box-pack:end;
  -o-box-pack:end;
  box-pack:end;
}

acticle section{
  line-height: 100px;
  width: 100px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
}
acticle section:nth-child(2){
  background:purple;
}
acticle section:nth-child(3){
  background:green;
}
```
<css-box-boxOrient5 />

|属性|说明|
|:-|:-|
|start|水平居左对齐|
|end|水平居右对齐|
|center|水平居中对齐|
|justify|水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）|

## box-flex小结
### 用法

```css
 // 父元素
 display: box;
  display: -moz-box;
  display: -webkit-box;
  
  // 子元素
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
```
### box

```js
box-orient | box-direction | box-align | box-pack | box-lines
```

### box-orient
|属性|说明|
|:-|:-|
|horizontal|水平排列|
|vertical|垂直排列|
|inline-axis|水平排列|
|block-axis|垂直排列|
|inherit|继承父元素相关属性|

### box-direction
说明：用来确定父容器里的子容器排列顺序<br/>
|属性|说明|
|:-|:-|
|normal|默认值|
|reverse|表示反转|
用法：<br/>

```css
// 父元素
-moz-box-direction:normal;
-webkit-box-direction:normal;
box-direction:normal;
```

### box-align
说明：表示父容器里面子容器的垂直对齐方式<br/>
|属性|说明|
|:-|:-|
|start|默认值|
|reverse|居顶对齐|
|end|居底对齐|
|center|居中对齐|
|stretch|拉伸，拉伸到与父容器等高|
用法：<br/>
```css
// 父元素
-moz-box-direction:stretch;
-webkit-box-direction:stretch;
box-direction:stretch;
```

### box-pack
说明：box-pack表示父容器里面子容器的水平对齐方式<br/>
|属性|说明|
|:-|:-|
|start|水平居左对齐|
|end|水平居右对齐|
|center|水平居中对齐|
|justify|水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）|
用法：<br/>
```css
/* 父元素 */
-moz-box-pack:end;
-webkit-box-pack:end;
-o-box-pack:end;
box-pack:end;
```