容器查詢-----Container Queries

什么是 CSS 容器查詢（Container Queries）？

在之前，對於同個樣式，我們如果希望根據視口大小得到不一樣效果，通常使用的是媒體查詢。

但是，一些容器或者組件的設計可能並不總是與視口的大小有關，而是與組件在布局中的放置位置有關。

所以在未來，新增了一種方式可以對不同狀態下的容器樣式進行控制，也就是容器查詢。在最新的 Chrome Canary 中，我們可以通過 chrome://flags/#enable-container-queries 開啟 Container Queries 功能。

假設我們有如下結構：

<div class="wrap">
    <div class="g-container">
        <div class="child">Title</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    </div>
</div>

正常情況下的樣式如下：

.g-container {
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid #ddd;

    .child {
        flex-shrink: 0;
        width: 200px;
        height: 100px;
        background: deeppink;
    }
    
    p {
        height: 100px;
        font-size: 16px;
    }
}

在未來，我們可以通過 @container query 語法，設定父容器 .wrap 在不同寬度下的不同表現，在上述代碼基礎上，新增下述代碼：

.wrap {
    contain: layout inline-size;
    resize: horizontal;
    overflow: auto;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid #ddd;
    .child {
        flex-shrink: 0;
        width: 200px;
        height: 100px;
        background: deeppink;
    }
    p {
        height: 100px;
        font-size: 16px;
    }
}
// 當 .wrap 寬度小於等於 400px 時下述代碼生效 
@container (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .g-container .child {
        width: 100%;
    }
}、

注意這里要開啟 @container query，需要配合容器的 contain 屬性，這里設置了 contain: layout inline-size，當 .wrap 寬度小於等於 400px 時， @container (max-width: 400px) 內的代碼則生效，從橫向布局 flex-wrap: nowrap 變換成了縱向換行布局 flex-wrap: wrap；