css三行两列布局

CSS布局对于前端开发来说是非常重要的一环，今天我们要讲的是三行两列布局。

 <div class="container">
        <div class="row">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
            <div class="col-4">3</div>
        </div>
        <div class="row">
            <div class="col-6">4</div>
            <div class="col-6">5</div>
        </div>
    </div> 

首先我们需要一个外层容器container，再往里面分成两行。第一行中有三个列col-4，第二行中有两个列col-6。那么接下来我们来看看CSS代码。

 .container {
        width: 960px;
        margin: 0 auto; /* 水平居中 */
    }
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .col-4 {
        width: 33.33%;
    }
    .col-6 {
        width: 50%;
    } 

我们给外层容器设置了宽度为960像素，然后水平居中。接着给每一行设置了display: flex;和flex-wrap: wrap;，这是让它们变成一个弹性（Flex）容器。那么每个列的宽度怎么设置呢？通过使用width百分比，.col-4的宽度设置为33.33%，.col-6的宽度设置为50%。

这样我们就可以轻松地实现一个三行两列布局了。同时，这种布局也非常适合响应式设计，可以适配不同尺寸的屏幕。希望本文对大家有所帮助！