在Web開發中，最麻煩的問題之一就是如何實現自適應布局，尤其是針對不同屏幕大小的設備。而CSS則是實現自適應布局的利器。下面分享一下如何使用CSS實現自適應Div。

首先我們需要理解Flexbox布局。Flexbox布局是一種用于設置元素定位的CSS3屬性，它的目標是提供一種更加有效的方式來對容器的排列、對齊和分布物品的方式。

下面我們就使用Flexbox布局實現一個自適應Div：

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

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 1 30%;
margin-bottom: 20px;
}

上述代碼中，我們使用display: flex定義容器使用Flexbox布局，并使用flex-wrap: wrap使元素在一行排列不下時自動換行；使用justify-content: space-between實現元素在容器內左右分散排列。而.item則使用flex: 1 1 30%，表示元素在容器內占的比例為1，不伸縮，寬度為30%。margin-bottom: 20px則表示元素之間的距離為20px。

總結一下，使用CSS的Flexbox布局可以方便地實現自適應Div。掌握Flexbox布局的基本規則，能夠更高效地進行布局設計。