css 多行三列自适应

CSS多行三列自适应布局一般是指在一个大的容器中分别放置三个小的元素，这三个元素都是均匀分布于容器中的，而且在不同分辨率下都可以自适应变换。下面我们来看一下实现该布局的CSS代码，具体如下：

.container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
}
.box {
        flex-basis: 30%;
        height: 200px;
        margin-bottom: 20px;
}
    

上述代码中首先创建了一个名为container的容器，容器采用flex布局，同时设置了flex-wrap属性，当宽度不足时，子元素可以自动换行。justify-content属性：用于定义子元素的水平对齐方式，这里我们让子元素在容器中等距离分布。align-items属性：用于定义子元素的垂直对齐方式，这里我们让子元素在容器的中心线上垂直对齐。

然后我们创建了一个名为box的元素，用于放置在container容器中。flex-basis属性：用于设置子元素的初始尺寸，如果剩余空间超出了初始尺寸，那么剩余的空间将被等比例地分配给所有子元素。height属性：用于设置子元素的高度。margin-bottom属性：用于设置子元素之间的间距。

最后，我们只需要在html中使用来包含这三个box元素，即可实现多行三列自适应布局，而且这个布局在不同的分辨率下也可以自适应变换。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！