Flex Box模型

Flexbox可以为你文档内的元素提供高效的布局、对齐和空间分配方式.

FlexBox初始化

将元素初始化为弹性盒模型非常简单，只需要在父级元素上将display属性设置为flex或者inline-flex即可。

<div class="container">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
</div>
<style>
      .container {
            display: flex;   /* inline-flex */
            outline: 1px dashed;
        }
     .list {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 8px;
        }
</style>

上方div块本身是block元素，垂直排列；声明为flex模型之后，变为flex默认的横向排列。div.container称为 弹性容器, div.list则为其弹性盒子子元素

更改为flex之后的div排列

Flex盒模型容器属性

1）flex-direction弹性伸缩方向

属性值	描述
row	默认值，横轴X自左向右
row-reverse	横轴X自右向左
column	纵轴Y轴自上而下
column-reverse	纵轴Y轴自下而上

效果对比一下

**flex-direction: row;** **flex-direction: row-reverse;** **flex-direction: column;** **flex-direction: column-reverse;**

2）flex-wrap弹性换行

默认没有换行，子元素全部压缩在一行中，而设置wrap属性，则可以控制其换行。

属性值	描述
nowrap	默认值，不换行
wrap	在规定宽度下不能容纳所有元素，则换行
wrap-reverse	反向换行

如container弹性容器有9个子元素，对比效果如下：
不换行的情况下，子元素会被压缩

**flex-wrap: nowrap;** **flex-wrap: wrap;** **flex-wrap: wrap-reverse;**

3）flex-flow弹性流

是flex-direction和flex-wrap属性的简写形式，格式为：flex-flow: [flex-direction] [flex-wrap];
如：

<div class="container-flow">
        <div class="list">1</div>
        <div class="list">2</div>
        <div class="list">3</div>
        <div class="list">4</div>
        <div class="list">5</div>
        <div class="list">6</div>
        <div class="list">7</div>
        <div class="list">8</div>
        <div class="list">9</div>
</div>
<style>
.container-flow {
            display: flex;
            flex-flow: column wrap;
            height: 400px;
}
.list {
      width: 100px;
      heght: 100px;
}
</style>

每个子元素按纵轴方向排列，在一列不能容纳的情况下换行显示，如图：

**flex-flow:column wrap;**

各个属性之间还有更多的组合形式，多去尝试。

4）justify-content内容对齐

设置子元素的对齐方式。

属性值	描述
flex-start	默认值，在排列方向的起始方向对齐
flex-end	在排列方向的结束方向对齐
center	排列向中心对齐
space-between	每个子元素之间的距离相等
space-around	包围在每个子元素周围的空间大小相等

space-around可能不太好理解，对照着效果图比较一下：

**justify-content: flex-end** **justify-content: center** **justify-content: space-between** **justify-content: space-around**

5）align-items元素对齐

与justify-content区别为前者为横轴基准，后者align-items则以纵轴为基准。其默认值为stretch.

属性值	描述
flex-start	在排列方向的起始方向对齐，纵向起始方向
flex-end	在排列方向的结束方向对齐
center	排列在中心对齐
stretch	默认值，每个子元素扩展到最大高度，填充满纵向空间
baseline	以内容底部为基准线对齐

<div class="container-align-items">
        <!-- 默认： stretch -->
        <h1 class="item">这是第1个子元素</h1>
        <h3 class="item">这是第2个子元素</h3>
        <h5 class="item">这是第3个子元素</h5>
</div>
<style>
      .container-align-items {
            outline: 1px dashed;
            height: 200px;
            /* 声明flex box*/
            display: flex;
            /* default：stretch*/
            align-items: stretch;
        }
        .item {
            background-color: lightblue;
            margin: 5px;
        }
</style>

如上三个子元素，当align-items取不同的值时，元素分布：

**align-items: stretch;** **align-items: flex-start;**
**align-items: flex-end;** **align-items: center;** **align-items: baseline;**

对于baseline的理解可能可以这样，其以内容的最底端为基准线来对齐元素。

6）align-content纵向内容对齐

设置在多行子元素的纵向排列, 要先将flex-wrap属性设置为换行wrap。其纵向填充空间，默认为stretch值。

属性值	描述
flex-start	在排列方向的起始方向对齐，纵向起始方向
flex-end	在排列方向的结束方向对齐
center	排列在中心对齐
stretch	默认值，每个子元素扩展到最大高度，填充满纵向空间，每行高度相同

<div class="container-align-content">
        <!-- 默认stretch -->
        <h1 class="content">这是第1个子元素</h1>
        <h2 class="content">这是第2个子元素</h2>
        <h3 class="content">这是第3个子元素</h3>
        <h4 class="content">这是第4个子元素</h4>
        <h5 class='content'>这是第5个子元素</h5>
        <h6 class='content'>这是第6个子元素</h6>
</div>
<style>
    .container-align-content {
        outline: 1px dashed;
        height: 200px;
        /* 声明flex box*/
        display: flex;
        /* default：stretch*/
        align-content: stretch;
        /*设置换行*/
        flex-wrap: wrap;
    }
    .content {
        background-color: lightblue;
        margin: 5px;
    }
</style>

当如上六个子元素，随着align-content值得变化如图：

**align-content: stretch;**
**align-content: flex-start;**
**align-content: flex-end;** **align-content: center;**