<div>是HTML中用來創建容器的元素。可以使用<div>標簽將一塊內容包裹起來，并且可以通過CSS對這些內容進行樣式設計和布局。這篇文章將介紹一些常用的<div>框架，幫助你更好地理解和運用這個強大的元素。
<div>框架可以為我們提供一種快速而靈活地構建網頁布局的方式。下面是幾個示例，展示了如何使用<div>框架實現一些常見的布局效果。
1. 垂直居中布局
有時候我們希望將一個元素垂直居中顯示，可以使用<div>框架來實現。

<!--
CSS代碼：
.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}
-->
<br>
HTML代碼：
<div class="container">
	<p>這是一個垂直居中的元素</p>
</div>

在上面的代碼中，通過設置容器的樣式屬性，我們使用了flex布局，并通過align-items和justify-content屬性將元素垂直居中顯示。
2. 等分布局
有時候我們希望將一行平均分成若干個等寬的列，可以使用<div>框架來實現。

<!--
CSS代碼：
.container {
	display: flex;
}
.column {
	flex: 1;
	padding: 10px;
	border: 1px solid #000;
}
-->
<br>
HTML代碼：
<div class="container">
	<div class="column">
<p>這是第一列</p>
	</div>
	<div class="column">
<p>這是第二列</p>
	</div>
	<div class="column">
<p>這是第三列</p>
	</div>
</div>

在上面的代碼中，通過設置容器的樣式屬性，我們使用了flex布局，并且將每個列的flex屬性設置為1，使它們平均分配容器的寬度。
3. 網格布局
有時候我們希望將內容顯示為網格形式，可以使用<div>框架來實現。

<!--
CSS代碼：
.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
}
.item {
	background-color: #000;
	color: #fff;
	padding: 10px;
	text-align: center;
}
<br>
HTML代碼：
<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>

在上面的代碼中，通過設置容器的樣式屬性，我們使用了grid布局，并通過grid-template-columns屬性設置了3列等寬，并通過grid-gap屬性設置了列之間的間隔。
通過上面的幾個示例，我們可以看到<div>框架在布局設計中的強大能力。使用<div>框架不僅可以提高開發效率，還可以使我們的網頁布局更加靈活和美觀。希望這些示例能幫助你更好地理解并運用<div>框架。