今天我们简单谈一下弹性盒，仅限于相对父元素的属性浅谈。
2009年，w3c提出了一种新的方案，Flex布局，它可以简便、完整、响应式地实现各种页面布局。目前它已得到所有浏览器的支持，这意味着现在就能很安全地使用这项功能。
先来介绍一下什么是flex，flex是flex box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。
任何一个容器都可以指定为flex布局：
.box{
display:flex;
}
行内元素也可以使用flex布局：
.box{
display:inline-flex;
}
注意！！！设为flex布局之后，子元素的float、clear和vertical-align属性将失效。
我们先设置几个盒子标签
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
我们给这些盒子设置一个样式，便于看的清楚
.box{
width: 500px;
height: 200px;
background: red;
}
.box div{
width: 60px;
height: 30px;
background: pink;
border: 1px solid rgb(27, 25, 25);
}
都知道块元素的特点是独占一行，所以在不给它设置任何其他属性之前他都是独占一行的：
我们先给他设置一个弹性布局：
.box{
display: flex;
}
看一下效果：
可以看到它和浮动有点类似，脱离标准文档流，默认排到一排。
我们再来看一下它都有哪些属性：
1、flex-direction
它决定主轴方向即项目的排列方式
①row:此为默认值，主轴为水平方向，起点在左端。和不作任何设置的情况下相同；
②row-reverse:主轴为水平方向，起点在右端。
.box{
display: flex;
flex-direction: row-reverse;
}
实现效果是这样的：
③column：主轴为垂直方向，起点在顶端。
.box{
display: flex;
flex-direction: column;
}
是这样的：
④column-reverse：主轴为垂直方向，起点在底部。
.box{
display: flex;
flex-direction: column-reverse;
}
2、flex-wrap
是否换行
默认情况下，项目都排在一条线上（轴线）。
flex-wrap属性定义，如果在一条轴线上排不下，如何换行。
它可以取三个值：
①nowrap默认值，在不设置的情况下默认不换行：
②wrap
换行，第一行在上方
.box{
display: flex;
flex-wrap: wrap;
}
③wrap-reverse
换行，第一行在下方
.box{
display: flex;
flex-wrap: wrap-reverse;
}
3、flex-flow
是flex-direction和flex-wrap的综合写法，默认值为row nowrap。
4、justify-content
定义了项目在主轴上的对齐方式
①flex-start左对齐
.box{
display: flex;
justify-content: flex-start;
}
②flex-end右对齐
.box{
display: flex;
justify-content: flex-end;
}
③center居中
.box{
display: flex;
justify-content: center;
}
④space-between两端对齐，项目之间间隔相等
.box{
display: flex;
justify-content: space-between;
}
⑤space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边距的间隔大一倍
.box{
display: flex;
justify-content: space-around;
}
5、align-items垂直方向对齐方式（适用于单行）
当设为center时居中
.box{
display: flex;
justify-content: space-around;
align-items: center;
}
6、align-content
适用于多行时的垂直方向对齐方式。
今天就简单介绍到这。
小编能力有限，存在不足或不全，请大家指出，共同学习与交流。
