<div cass布局是一種常用的網頁布局技術，通過給父容器設置 display: flex 屬性，可以方便地實現各種復雜的布局效果。下面通過幾個代碼案例詳細解釋和說明。
第一個案例是通過<div>標簽創建一個簡單的水平布局。可以通過設置 div 的 display 屬性為 flex 來實現。例如：

<div style="display: flex;">
<div style="flex: 1;">
<p>這是左側內容</p>
</div>
<div style="flex: 1;">
<p>這是右側內容</p>
</div>
</div>

上述代碼會將左側內容和右側內容平分父容器的寬度，實現一個簡單的水平布局。
第二個案例是實現一個垂直居中的布局。可以通過設置 div 的 align-items 和 justify-content 屬性為 center 來實現。例如：

<div style="display: flex; align-items: center; justify-content: center;">
<p>這是居中的內容</p>
</div>

上述代碼會將內容在父容器中垂直和水平居中。
第三個案例是實現一個兩列布局，左側固定寬度，右側自適應寬度。可以通過設置左側 div 的 flex 屬性為 none 來固定寬度，設置右側 div 的 flex 屬性為 1 來自適應寬度。例如：

<div style="display: flex;">
<div style="flex: none; width: 200px;">
<p>這是左側內容</p>
</div>
<div style="flex: 1;">
<p>這是右側內容</p>
</div>
</div>

上述代碼中，左側內容的寬度固定為 200px，右側內容的寬度會自動調整以填滿剩余空間。
<div cass布局是一種強大的網頁布局技術，可以輕松實現各種復雜的布局效果。通過靈活運用 display、flex、align-items 等屬性，可以實現水平布局、垂直布局、居中布局以及自適應寬度等效果。通過進一步學習和掌握這些屬性的用法，可以更好地應用到實際項目中，提升網頁布局的效果和用戶體驗。