弹性盒子属性介绍

## 什么是弹性盒子

弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。

## 如何设置一个弹性盒子

```
如何将一个容器变为弹性容器呢？
display:flex|inline-flex```

具体的弹性容器属性列表:

* flex-direction:弹性容器中子元素的排列方式(主轴排列方式)
* flex-wrap:设置弹性盒子的子元素超出父容器时是否换行
* flex-flow:flex-direction 和 flex-wrap 的简写
* align-item:设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
* align-content:修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐(行与行的对其方式)
* justify-content:设置弹性盒子元素在主轴（横轴）方向上的对齐方式

用案例来直接展示出现的效果，先来设置下代码统一样式：
```
<style type="text/css">
body{
display: flex;
flex-flow: row wrap;
100%;
}
div[class*="box"]{
300px;
height: 300px;
background: pink;
display: flex;
box-sizing: border-box;
}
div[class*="box"]:nth-child(2n){
background: greenyellow;
}
div[class*="box"]>div{
height: 75px;
75px;
box-sizing: border-box;
border: #000000 1px solid;
}
……
</style>
```
以上是对统一样式的设置
******
### 第一个案例盒子：flex-flow: row;横向排列没有换行，自动缩小子元素宽度
```
<div class="box1">
<div>横向排列</div>
<div>flex-flow: row;</div>
<div>flex-flow: row;</div>
<div>flex-flow: row;</div>
<div>flex-flow: row;</div>
<div>flex-flow: row;</div>
</div>
<style type="text/css">
.box1{
flex-flow: row;
}
</style>
```

### 第二个案例盒子
```
<div class="box2">
<div>横向排列并换行</div>
<div>flex-flow: row wrap;</div>
<div>flex-flow: row wrap;</div>
<div>flex-flow: row wrap;</div>
<div>flex-flow: row wrap;</div>
<div>flex-flow: row wrap;</div>
</div>
<style type="text/css">
.box1{
flex-flow: row wrap;
}
</style>
```

### 第三个案例盒子
```
<div class="box3">
<div>竖向排列并换行</div>
<div>flex-flow: column wrap;</div>
<div>flex-flow: column wrap;</div>
<div>flex-flow: column wrap;</div>
<div>flex-flow: column wrap;</div>
<div>flex-flow: column wrap;</div>
</div>
<style type="text/css">
.box3{
flex-flow: column wrap;
}
</style>
```

### 第四个案例盒子
```
<div class="box4">
<div>竖向倒叙排列并不换行</div>
<div>flex-flow: column-reverse nowrap</div>
<div>flex-flow: column-reverse nowrap</div>
<div>flex-flow: column-reverse nowrap</div>
<div>flex-flow: column-reverse nowrap</div>
<div>flex-flow: column-reverse nowrap</div>
</div>
<style type="text/css">
.box4{
flex-flow: column-reverse nowrap;
}
</style>
```

### 第五个案例盒子
```
<div class="box5">
<div>横向倒叙排列并换行</div>
<div>flex-flow: row-reverse wrap</div>
<div>flex-flow: row-reverse wrap</div>
<div>flex-flow: row-reverse wrap</div>
<div>flex-flow: row-reverse wrap</div>
<div>flex-flow: row-reverse wrap</div>
</div>
<style type="text/css">
.box5 {
flex-flow: row-reverse wrap;
}
</style>
```

### 第六个案例盒子
```
<div class="box6">
<div>侧轴排列头部开始</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>align-items: flex-start</div>
</div>
<style type="text/css">
.box6 {
align-items: flex-start
}
</style>
```

### 第七个案例盒子
```
<div class="box7">
<div>侧轴排列尾部开始</div>
<div>1111</div>
<div>2222</div>
<div>align-items: flex-end;</div>
</div>
<style type="text/css">
.box7 {
flex-flow: wrap;
align-items: flex-end;
}
</style>
```

### 第八个案例盒子
```
<div class="box8">
<div>侧轴排列中间开始</div>
<div>1111</div>
<div>2222</div>
<div>align-items: center;</div>
</div>
<style type="text/css">
.box8 {
flex-flow: wrap;
align-items: center;
}
</style>
```

### 第九个案例盒子
```
<div class="box9">
<div>侧轴排列基线开始</div>
<div></div>
<div></div>
<div>align-items: baseline;</div>
</div>
<style type="text/css">
.box9 {
flex-flow: wrap;
align-items: baseline;
}
</style>
```

### 第十个案例盒子
```
<div class="box10">
<div>侧轴排列头部开始没有行间距</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>align-content: flex-start;</div>
</div>
<style type="text/css">
.box10 {
flex-flow: wrap;
align-content: flex-start;
}
</style>
```

### 第十一个案例盒子
```
<div class="box11">
<div>侧轴排列尾部开始没有行间距</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>align-content: flex-end;</div>
</div>
<style type="text/css">
.box11 {
flex-flow: wrap;
align-content: flex-end;
}
</style>
```

### 第十二个案例盒子
```
<div class="box12">
<div>侧轴排列居中开始没有行间距</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>align-content: center;</div>
</div>
<style type="text/css">
.box12 {
flex-flow: wrap;
align-content: center;
}
</style>
```

### 第十三个案例盒子
```
<div class="box13">
<<div>侧轴排列两端对齐，中间自动分配</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>align-content: space-between;</div>
</div>
<style type="text/css">
.box13 {
flex-flow: wrap;
align-content: space-between;
}
</style>
```

### 第十四个案例盒子
```
<div class="box14">
<div>侧轴排列自动分配空间</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>2222</div>
<div>3333</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>align-content: space-between;</div>
</div>
<style type="text/css">
.box14 {
flex-flow: wrap;
align-content: space-around;
}
</style>
```

### 第十五个案例盒子
```
<div class="box15">
<div>横向排列顶端对齐</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>2222</div>
<div>3333</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>justify-content: flex-start;</div>
</div>
<style type="text/css">
.box15 {
flex-flow: wrap;
justify-content: flex-start;
}
</style>
```

### 第十六个案例盒子
```
<div class="box16">
<div class="box16">
<div>横向排列右侧对齐</div>
<div>1111</div>
<div>justify-content: flex-eng;</div>
</div>
</div>
<style type="text/css">
.box16 {
flex-flow: wrap;
justify-content: flex-end;
}
</style>
```

### 第十七个案例盒子
```
<div class="box17">
<div>横向排列居中对齐</div>
<div>1111</div>

<div>justify-content: center;</div>
</div>
<style type="text/css">
.box17 {
flex-flow: wrap;
justify-content: center;
}
</style>
```

### 第十八个案例盒子
```
<div class="box18">
<div>横向排列两端对齐</div>
<div>1111</div>
<div>justify-content: space-between;</div>
</div>
<style type="text/css">
.box18 {
flex-flow: wrap;
justify-content: space-between;
}
</style>
```

### 第十九个案例盒子
```
<div class="box19">
<div>横向排列自动对齐</div>
<div>1111</div>
<div>justify-content: space-around;</div>
</div>
<style type="text/css">
.box19 {
flex-flow: wrap;
justify-content: space-around;
}
</style>
```

 ### 以上就是我个人的总结，希望能帮助到哪些需要帮助的人