## 弹性盒子属性介绍

Posted 2021-11-02 caominjie

## 什么是弹性盒子

弹性盒子模型是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>
```