网页布局自适应的另一种解决方案

这里的“另一种”是相对目前（2018.10.08）较为普遍应用的栅格系统（float布局）而言。本文的观点当然不是原创，只是从码者自身出发，整理自己的所学所用。

没错，就是flex布局

文末有阮一峰老师的flex布局教程，不熟悉的同仁可以先跟阮老师学习一下flex的基本用法。

码者认为，不同于float布局设置某标签（内容）自身的css属性，flex布局的核心是造一个容器（相当于bootstrap里的row），设定盒子里面的布局规则（当然也是css）

.tar{
    width: 600px;
    margin: 100px auto;
    border: 1px #000 solid;

    display: flex; // 设置为flex容器
    flex-wrap: wrap; // 多行
    justify-content: flex-start;
}
.tar div{
    border: 1px #888 solid;
    height: 60px;
    background: #aaa;

    margin: 10px;
    width: calc(33% - 20px); // 注意减号两边要有空格（复制时可能丢失）
    /* 这里可以通过媒体查询设置不同屏幕上的宽度 */
}

<div class="tar">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

参考

Flex 布局教程：语法篇 作者 阮一峰

Flex 布局教程：实例篇 作者 阮一峰