<div 滿格（full-house）是一種常見的CSS布局技術(shù)，它可以使兩個或多個元素在一個容器中以等寬等高的形式排列。這種布局技術(shù)通常用于創(chuàng)建網(wǎng)格或柵格系統(tǒng)，可以有效地實現(xiàn)響應式設計。在下面的幾個例子中，我將使用代碼來詳細解釋和說明<div 滿格的用法和作用。

第一個例子是一個簡單的<div 滿格布局，其中包含兩個子元素。一旦設置了父容器的display屬性為flex，子元素就會自動成為等寬等高的塊級元素。

<div style="display: flex;">
<div style="background-color: #ff7f50; flex:1;"></div>
<div style="background-color: #87cefa; flex:1;"></div>
</div>

在上面的代碼中，我們設置了兩個子元素的背景顏色和flex屬性。flex: 1;表示子元素將平均占據(jù)父容器的剩余空間，以確保它們的寬度相等。運行這段代碼后，我們會發(fā)現(xiàn)兩個子元素將等寬等高地填充整個父容器。

接下來，讓我們看一個稍微復雜一些的例子。這次我們將創(chuàng)建一個包含四個子元素的<div 滿格布局，它們各自被著不同的背景顏色。

<div style="display: flex;">
<div style="background-color: #ff7f50; flex:1;"></div>
<div style="background-color: #87cefa; flex:1;"></div>
<div style="background-color: #98fb98; flex:1;"></div>
<div style="background-color: #ffa07a; flex:1;"></div>
</div>

上面的代碼中，我們使用相同的CSS屬性設置了四個子元素。這次我們將背景顏色設置為了不同的值，以便更好地區(qū)分它們。運行這段代碼后，我們會發(fā)現(xiàn)四個子元素將以等寬等高的方式排列在父容器中。

最后，讓我們看一個應用實例，展示如何使用<div 滿格布局來創(chuàng)建一個響應式的圖片柵格。這個例子將展示一個包含六張圖片的網(wǎng)格，它們在不同屏幕尺寸下都能正確地自動調(diào)整大小。

<div style="display: flex; flex-wrap: wrap;">
<div style="background-image: url('image1.jpg'); flex: 1 0 33%;"></div>
<div style="background-image: url('image2.jpg'); flex: 1 0 33%;"></div>
<div style="background-image: url('image3.jpg'); flex: 1 0 33%;"></div>
<div style="background-image: url('image4.jpg'); flex: 1 0 33%;"></div>
<div style="background-image: url('image5.jpg'); flex: 1 0 33%;"></div>
<div style="background-image: url('image6.jpg'); flex: 1 0 33%;"></div>
</div>

在上面的代碼中，我們使用了flex-wrap屬性來控制子元素的換行。flex: 1 0 33%;表示子元素將以占據(jù)父容器三分之一寬度的方式進行布局。無論屏幕的尺寸如何變化，子元素的寬度都會自動調(diào)整以適應不同的屏幕。

通過上述示例，我們可以看到<div 滿格布局的強大之處。它提供了一種簡單而靈活的方法來實現(xiàn)等寬等高的元素排列，并在響應式設計中起到重要的作用。通過靈活運用CSS屬性，我們可以輕松創(chuàng)建出各種不同樣式的網(wǎng)格，適應不同的設計需求。