弹性盒

文档流：所显即所在优点（阅读性好维护性好）缺点（不够灵活）
脱离文档流浮动（功能单一）定位（阅读和维护难度高）

弹性盒，表现灵活阅读和维护性好
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

display:flex 即设为弹性盒
父盒子定义display:flex样式属性
每一个子元素即变为弹性的盒子了脱离文档流默认横排

学习弹性盒注意一个父子元素的概念父设子规

父元素即容器上的设置项：
设置display:flex后的后续设置

<html lang="en">
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav{
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <span>logo</span>
            <span>搜索</span>
        </div>
    </div>
</body>

flex-direction 决定轴的方向
1.row 默认值。元素将水平显示，正如一个行一样。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: row;
     }

2.row-reverse 与 row 相同，但是以相反的顺序。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: row-reverse;
    }

3.column 元素将垂直显示，正如一个列一样。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: column;
    }

4.column-reverse 与 column 相同，但是以相反的顺序。

.nav{
     width: 100%;
     height: 40px;
     line-height: 40px;
     display: flex;
     flex-direction: column-reverse;
    }

flex-wrap 控制换行情况
1.nowrap 默认值。规定元素不换行。
2.wrap 规定元素在必要的时候换行。
3.wrap-reverse 规定元素在必要的时候以相反的顺序换行。先按正序换行然后将行倒叙
flex-flow 轴和换行的简写
1.flex-container { flex-flow: <flex-direction> <flex-wrap> }
justify-content 以交叉侧轴为中心的集聚方式（元素在主轴方向上的对齐方式）

1.flex-start默认值。项目位于容器的开头。

2.flex-end项目位于容器的结尾。

3.center项目位于容器的中心。

4.space-between项目位于各行之间留有空白的容器内。

5.space-around项目位于各行之前、之间、之后都留有空白的容器内。

align-items 以交叉横轴为中心的挤聚方式（子元素需要设置宽高）

1.stretch 项目被拉伸以适应容器。

2.center 项目位于容器的中心。

3.flex-start 默认值项目位于容器的开头。

4.flex-end 项目位于容器的结尾。

5.baseline 项目位于容器的基线上。

flex-item 弹性盒子元素属性
1.order设置弹性盒子的子元素排列顺序。int 默认为0 小的在前
2.flex-grow设置或检索弹性盒子元素的扩展比率。int
3.flex-shrink指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。int 默认值1
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。

1.auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

2.stretch元素被拉伸以适应容器。

3.center元素位于容器的中心。

4.flex-start元素位于容器的开头。

5.flex-end元素位于容器的结尾。

6.baseline元素位于容器的基线上。

7.initial设置该属性为它的默认值。

8.inherit从父元素继承该属性。