4.1 flex布局体验

本节只是体验，先不要管代码是如何实现的

传统布局和flex弹性布局对比

flex布局可以做很多事情，比如让行内元素可以使用块级元素的样式，可以水平/垂直居中，可以根据网页自适应的调整位置。这样就不需要使用浮动也能让元素在一行，所以也不用清除浮动了。

案例对比

让三个小盒子，在父盒子中水平排放，如果使用标准流加浮动，则就比较麻烦了，而对于flex布局，只需要使用行内元素即可。

标准流＋浮动

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <style>
        div {
            background-color: pink;
            height: 300px;
            width: 80%;
        }
        div span {
            display: inline-block;
            background-color: purple;
            margin-right: 1px;
            height: 100px;
            width: 100px;
        }

flex布局

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

    <style>
        div {
            display: flex;

            background-color: pink;
            height: 300px;
            width: 80%;
        }

        div span {
            background-color: purple;
            margin-right: 1px;
            height: 100px;
            width: 100px;
        }
    </style>