<div>與Flex布局是常用于前端開(kāi)發(fā)的兩種不同的布局方式。
<div>是HTML中的一個(gè)標(biāo)簽，用于創(chuàng)建一個(gè)塊級(jí)元素，可以將頁(yè)面的不同部分進(jìn)行劃分，可以給該元素設(shè)置樣式，定義寬度、高度、邊距等等。在Web開(kāi)發(fā)中，我們經(jīng)常使用<div>來(lái)布局頁(yè)面。
而Flex布局（也被稱為彈性布局）是一種CSS3的布局方式，它可以使容器中的子元素按照一定的規(guī)則進(jìn)行排列，自動(dòng)調(diào)整每個(gè)子元素的大小和位置。使用Flex布局可以實(shí)現(xiàn)各種復(fù)雜的布局效果，并提供了更加靈活和自適應(yīng)的布局方式。
下面將通過(guò)幾個(gè)代碼案例來(lái)詳細(xì)解釋<div>和Flex布局的使用方法和效果。
第一個(gè)案例是使用<div>布局實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)頭部。我們可以使用<div>標(biāo)簽創(chuàng)建一個(gè)頭部容器，并為其設(shè)置一些樣式，如背景顏色、高度等。然后在容器內(nèi)部放置一些內(nèi)容，如標(biāo)題和導(dǎo)航欄。代碼如下：

<p><div class="header"></p>
<p>   <h1>這是網(wǎng)頁(yè)的標(biāo)題</h1></p>
<p>   <ul class="navigation"></p>
<p>     <li>導(dǎo)航1</li></p>
<p>     <li>導(dǎo)航2</li></p>
<p>     <li>導(dǎo)航3</li></p>
<p>   </ul></p>
<p></div></p>

在上面的代碼中，我們創(chuàng)建了一個(gè)名為"header"的<div>容器，并在容器內(nèi)部放置了一個(gè)標(biāo)題和一個(gè)無(wú)序列表。通過(guò)為容器設(shè)置樣式，我們可以控制頭部的外觀，并使用CSS來(lái)對(duì)標(biāo)題和導(dǎo)航欄進(jìn)行樣式定義。
第二個(gè)案例是使用Flex布局實(shí)現(xiàn)一個(gè)響應(yīng)式的頁(yè)面。我們可以使用Flex布局來(lái)定義頁(yè)面的整體布局，并通過(guò)設(shè)置子元素的屬性來(lái)控制其在容器中的位置和大小。代碼如下：

<p><div class="container"></p>
<p>   <div class="sidebar">這是側(cè)邊欄</div></p>
<p>   <div class="content">這是主要內(nèi)容</div></p>
<p></div></p>

在上面的代碼中，我們創(chuàng)建了一個(gè)名為"container"的容器，并在容器內(nèi)部放置了一個(gè)側(cè)邊欄和一個(gè)主要內(nèi)容區(qū)域。通過(guò)設(shè)置容器的display屬性為"flex"，我們可以將容器內(nèi)的子元素按照一定的規(guī)則自動(dòng)排列。通過(guò)設(shè)置子元素的flex屬性和flex-basis屬性，我們可以控制各個(gè)子元素在容器中的位置和大小。
<div>和Flex布局是Web開(kāi)發(fā)中常用的兩種布局方式，它們各自具有自己的特點(diǎn)和應(yīng)用場(chǎng)景。<div>布局適用于簡(jiǎn)單的網(wǎng)頁(yè)布局，可以較為靈活地控制元素的位置和大小；而Flex布局適用于復(fù)雜的頁(yè)面布局，可以自動(dòng)調(diào)整元素的大小和位置。在實(shí)際項(xiàng)目中，我們可以根據(jù)具體的需求選擇合適的布局方式來(lái)實(shí)現(xiàn)頁(yè)面的布局效果。