弹性盒模型 flex

2009年，W3C提出了一个新的盒模型(flex)，用于解决网页布局中的一些问题。

---

flex 的优势

• flex布局的子元素不会脱标。
• 属性非常丰富，可以灵活使用更加便捷的为页面布局。
• IE低版本不支持IE10－11支持度不高，标准浏览器完全支持。
• 移动端支持性也比较高。

弹性盒子

声明定义：使用display：flex;或者inline－flex**声明一个元素为弹性盒子。

［注意 ］弹性盒子中的子级块级元素会并排显示。

flex与inline－flex的区别

• flex；如果没有设置宽高，宽默认为100%, 高度为内容的高。
• inline－flex；如果没有设置宽高，宽高为内容的宽高，使用的比较少。

弹性盒子的属性

1.flex-direction 控制子元素排列的方向。

• row 从左到右水平排列子元素（默认值）。
• row-reverse 从右到左水平排列子元素。
• column 从上到下垂直排列子元素。
• column-reverse 从下往上垂直排列子元素。

例1：

    <style>
        .father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

例2：

    <style>
        .father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-direction: row-reverse;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }
    

2.flex-wrap 规定容器是单行或是多行。

• nowrap 子元素不会换行（默认）。
• wrap 子元素的宽/高总和超出父容器的宽/高时，子元素会换行。
• wrap-reverse 容器换行时，以相反方向。

例1：

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

例2：

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap-reverse;
        }
        .son  {
            width: 100px;
            height: 100px;
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

3.flex-flow 是flex-direction与flex-wrap的组合简写。

例：

      flex-flow: row wrap;

主轴与交叉轴

• 主轴：flex子元素的排列方向。默认是水平方向，从左到右。
• 交叉轴：与主轴垂直，方向是换行的方向。

1.justify-content 控制子元素在主轴上的排列方式。

• flex-start 第一个元素紧靠主轴的起点。
• flex-end 元素紧靠主轴的终点。
• center：元素居中。
• space-between 第一个元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
• space-around 每个元素两侧都有一个相同的距离，所有元素之间的间隔要比元素与容器之间的间隔大一倍。
• space-evenly 元素间的平均分配。

例1：

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            justify-content: space-between;
        }

例2：

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            justify-content: space-around;
        }

2.align-items 设置子元素在交叉轴上的对齐方式。

• flex-start 元素紧靠交叉轴的起点。
• flex-end 元素紧靠交叉轴的终点。
• center 元素在交叉轴方向居中。
• stretch 拉伸。让子项与父容器的交叉轴等高或等宽（默认），前提是子项没有设置相应的
  宽高。

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            align-items: stretch;
        }
        .son  {
            /* width: 100px;
            height: 100px; */
            background: #ff6700;
            border: 1px solid;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;
        }

3.align-content 设置子元素在交叉轴上的对齐方式。（只适用多行，需要配合flex-wrap。）

• flex-start 元素紧靠交叉轴的起点。
• flex-end 元素紧靠交叉轴的终点。
• center 元素在交叉轴方向居中。
• stretch 拉伸。让子项与父容器的交叉轴等高或等宽（默认），前提是子项没有设置相应的宽高。
• space-between：两端对齐，第一行紧靠起点，最后一行紧靠终点，剩余空间平均分配。
• space-around：每一个元素都有一个相等的距离，两个元素之间的距离不会重合。元素间的间隔要比元素与容器之间的间隔大一倍。
• space-evenly：元素间的距离平均分配。

例1：

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

例2：

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }

例3：

		.father {
            width: 600px;
            height: 400px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            align-content: space-evenly;
        }

---