<div 彈性布局是一種用于網頁布局的技術，它可以幫助我們更好地控制元素在頁面中的位置和大小。通過使用彈性布局，我們可以實現自適應頁面布局，使元素能夠根據不同設備的屏幕尺寸和分辨率進行調整。div 彈性布局使用了 CSS3 中的 Flexbox 屬性，通過簡單的 CSS 代碼就可以實現靈活的頁面布局。
<div 彈性布局的核心是 flex 容器和 flex 項目。flex 容器是一層含有多個 flex 項目的元素，而 flex 項目則是容器內的子元素。在使用 flex 屬性時，我們需要將容器元素的 display 屬性設置為 flex，這樣容器就具備了彈性布局的功能。接下來，我們將通過幾個代碼案例詳細解釋說明 div 彈性布局的使用方法和效果。

案例一：父容器中的子元素等寬排列

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

在上面的代碼中，我們創建了一個容器元素和三個子元素。為了實現子元素的等寬排列，我們可以為容器元素添加以下樣式：

.container {
display: flex;
justify-content: space-between;
}

通過設置容器元素的 display 屬性為 flex，我們將容器設置為 flex 容器。而 justify-content 屬性設置為 space-between，則表示子元素在容器中均勻分布，并且兩個子元素之間有空隙。這樣，無論容器的寬度如何變化，子元素都會等寬排列在容器中。

案例二：子元素的固定尺寸和自動填充剩余空間

<div class="container">
<div class="item">固定尺寸</div>
<div class="item">固定尺寸</div>
<div class="item">自動填充剩余空間</div>
</div>

在上述代碼中，我們將前兩個子元素設置為固定尺寸，而第三個子元素則需要自動填充剩余空間。我們可以為容器元素添加以下樣式：

.container {
display: flex;
flex-direction: column;
height: 200px;
}
.item:nth-child(1),
.item:nth-child(2) {
flex: 0 0 50px;
}
.item:nth-child(3) {
flex: 1;
}

，我們將容器元素的 display 屬性設置為 flex，這樣容器就變為 flex 容器。接著，我們使用 flex-direction 屬性將子元素從水平排列改為垂直排列，并設置容器的高度為 200px。對于前兩個子元素，我們使用 flex 屬性分別設置它們的伸縮性：flex: 0 0 50px 表示前兩個子元素既不放大也不縮小，且寬度固定為 50px。而對于第三個子元素，我們使用 flex: 1 來表示它會自動填充剩余的空間。這樣，當容器的高度發生變化時，第三個子元素會自動適應填充剩余空間。

案例三：子元素的自動換行

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

在上面的代碼中，我們創建了一個容器元素和六個子元素。為了實現子元素的自動換行，我們可以為容器元素添加以下樣式：

.container {
display: flex;
flex-wrap: wrap;
}

通過設置容器元素的 display 屬性為 flex，并使用 flex-wrap: wrap，我們指定了當子元素超出容器寬度時，自動換行顯示。這樣，當容器的寬度不足以容納所有子元素時，它們會自動排列到下一行或下一列中。

<div 彈性布局為我們提供了一種強大而靈活的頁面布局方式。通過簡單的 CSS 代碼，我們可以實現等寬排列、自動填充剩余空間、自動換行等多種布局效果。在設計響應式網頁和移動端頁面時，div 彈性布局成為了一種受歡迎的選擇。通過靈活運用 div 彈性布局，我們可以更好地適應不同設備和屏幕尺寸的需求，提供更好的用戶體驗。</div>