弹弹弹，弹走鱼尾纹

今天我们简单谈一下弹性盒，仅限于相对父元素的属性浅谈。
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);
}

都知道块元素的特点是独占一行，所以在不给它设置任何其他属性之前他都是独占一行的：

div.png

我们先给他设置一个弹性布局：

    .box{
        display: flex;
    }

看一下效果：

flex.png

可以看到它和浮动有点类似，脱离标准文档流，默认排到一排。

我们再来看一下它都有哪些属性：
1、flex-direction
它决定主轴方向即项目的排列方式
①row:此为默认值，主轴为水平方向，起点在左端。和不作任何设置的情况下相同；
②row-reverse:主轴为水平方向，起点在右端。

.box{
      display: flex;
      flex-direction: row-reverse;
}

实现效果是这样的：

row-reverse.png

③column：主轴为垂直方向，起点在顶端。

.box{
    display: flex;
    flex-direction: column;
}

是这样的：

column.png

④column-reverse：主轴为垂直方向，起点在底部。

.box{
    display: flex;
    flex-direction: column-reverse;
}

column-reverse.png

2、flex-wrap
是否换行
默认情况下，项目都排在一条线上（轴线）。
flex-wrap属性定义，如果在一条轴线上排不下，如何换行。
它可以取三个值：
①nowrap默认值，在不设置的情况下默认不换行：

nowrap.png

②wrap
换行，第一行在上方

.box{
    display: flex;
    flex-wrap: wrap;
}

wrap.png

③wrap-reverse
换行，第一行在下方

.box{
     display: flex;
    flex-wrap: wrap-reverse;
}

wrap-reverse.png

3、flex-flow
是flex-direction和flex-wrap的综合写法，默认值为row nowrap。
4、justify-content
定义了项目在主轴上的对齐方式
①flex-start左对齐

.box{
    display: flex;
    justify-content: flex-start;
}

flex-start.png

②flex-end右对齐

    .box{
        display: flex;
         justify-content: flex-end;
    }

flex-end.png

③center居中

.box{
    display: flex;
    justify-content: center;
}

image.png

④space-between两端对齐，项目之间间隔相等

.box{
    display: flex;
    justify-content: space-between;
}

image.png

⑤space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边距的间隔大一倍

.box{
    display: flex;
    justify-content: space-around;
}

image.png

5、align-items垂直方向对齐方式（适用于单行）
当设为center时居中

.box{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

image.png

6、align-content
适用于多行时的垂直方向对齐方式。

今天就简单介绍到这。
小编能力有限，存在不足或不全，请大家指出，共同学习与交流。