flex布局

 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

一、flex-direction属性，决定主轴的方向（即项目的排列方向）。

<body>
        <div class="flex">
            <div class="flex-content">1</div>
            <div class="flex-content">2</div>
            <div class="flex-content">3</div>
            <div class="flex-content">4</div>
            <div class="flex-content">5</div>
        </div>
    </body>

　　　.flex{
                display: flex;
                
            }
            .flex-content{
                background-color: gold;
                width: 100%;
                border: 1px solid red;
            }

1、row（默认值）：主轴为水平方向，起点在左端。

2、row-reverse：主轴为水平方向，起点在右端。

3、column：主轴为垂直方向，起点在上沿。

4、column-reverse：主轴为垂直方向，起点在下沿。

二、flex-wrap属性，如果一条轴线排不下，如何换行。

    <div class="flex">
            <div class="flex-content">1</div>
            <div class="flex-content">2</div>
            <div class="flex-content">3</div>
            <div class="flex-content">4</div>
            <div class="flex-content">5</div>
            <div class="flex-content">6</div>
            <div class="flex-content">7</div>
            <div class="flex-content">8</div>
            <div class="flex-content">9</div>
            <div class="flex-content">10</div>
        </div>

    .flex{
                border: 1px solid #666666;
                margin: 0 auto;
                width: 1000px;
                display: flex;
                /* flex-wrap: wrap; */
            }
            .flex-content{
                background-color: gold;
                width: 30%;
                border: 1px solid red;
            }