flex布局

时间：2020-07-07 12:44:03 阅读：69 评论：0 收藏：0 [点我收藏+]

　　<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;
            }

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

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;
            }