彈性盒子屬性介紹

## 什么是彈性盒子

彈性盒子模型是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;
width: 100%;
}
div[class*="box"]{
width: 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;
width: 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>
```

 ### 以上就是我個人的總結，希望能幫助到哪些需要幫助的人