在網頁設計中，經常會碰到需要讓一行元素均勻分布的情況。傳統的方式是使用表格，但現在我們可以通過使用CSS3中的flex布局來實現這個目標。Flex布局允許我們通過設置<div>元素的樣式來改變其子元素的排列方式。其中，"div 兩端對齊"指的是讓<div>容器中的子元素在容器內均勻分布，兩端對齊，不留空白。

案例一：使用justify-content屬性

使用justify-content屬性可以實現子元素的兩端對齊。在<div>的樣式中，設置justify-content為space-between：

<style>
.container {
display: flex;
justify-content: space-between;
}
</style>
<br>
<div class="container">
<div>第一個元素</div>
<div>第二個元素</div>
<div>第三個元素</div>
<div>第四個元素</div>
</div>

在上述代碼中，設置了一個容器div，并給其子元素添加了一些樣式。justify-content: space-between使子元素均勻分布在容器中，兩端對齊。

案例二：使用margin屬性

除了使用justify-content屬性，我們還可以使用margin屬性來實現兩端對齊的效果。將每個子元素的margin-left和margin-right屬性設置為auto：

<style>
.container {
display: flex;
}
<br>
.container div {
margin-left: auto;
margin-right: auto;
}
</style>
<br>
<div class="container">
<div>第一個元素</div>
<div>第二個元素</div>
<div>第三個元素</div>
<div>第四個元素</div>
</div>

上述代碼中，通過為子元素的margin-left和margin-right屬性設置為auto，實現了兩端對齊的效果。每個子元素將會在容器中占據相等的空間，從而實現了均勻分布，并且兩端對齊的效果。

案例三：使用flex-grow屬性

另一種實現兩端對齊的方法是使用flex-grow屬性。通過設置flex-grow為1，可以使得子元素均勻分布在容器中：

<style>
.container {
display: flex;
}
<br>
.container div {
flex-grow: 1;
}
</style>
<br>
<div class="container">
<div>第一個元素</div>
<div>第二個元素</div>
<div>第三個元素</div>
<div>第四個元素</div>
</div>

上述代碼中，設置了flex-grow屬性為1，使得所有的子元素均勻分布在容器中。每個子元素將會占據相等的空間，從而實現了兩端對齊的效果。

通過以上幾個案例的介紹，我們可以看到flex布局提供了多種方式來實現兩端對齊。使用justify-content屬性、margin屬性和flex-grow屬性都可以達到相同的效果。在實際應用中，根據具體情況選擇最適合的方法來實現兩端對齊的需求。

總之，使用flex布局能夠輕松實現<div>兩端對齊的效果，使得網頁的布局更加靈活美觀。