網頁佈局自適應的另一種解決方案

這裡的“另一種”是相對目前（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 佈局教程：例項篇 作者 阮一峰