<div>是HTML中的一個標簽，用于定義HTML文檔中的一個區域或容器。而flex是CSS中有關布局的屬性，它可以讓我們更輕松地控制容器中的元素的位置和大小。在使用div和flex布局時，有時候我們希望容器的內容能夠自動適應容器的寬度，同時不出現超出容器的情況。本文將詳細介紹如何使用div和flex來實現內容不超出容器的效果。

，讓我們來看一個簡單的例子。假設我們的HTML結構如下：

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

我們希望.container中的.item能夠自動適應容器的寬度，并且不超出容器。為了實現這個效果，我們可以為.container添加以下CSS樣式：

<code>
.container {
display: flex;
flex-wrap: wrap;
}
</code>

上述代碼中，我們使用了flex布局，并設置了flex-wrap屬性為wrap。這樣，當容器的寬度不足以容納所有.item時，項會進行折行顯示。這樣就可以確保容器中的內容不會超出容器的寬度。

接下來，我們再來看一個稍微復雜一些的例子。假設我們希望.container中的.item元素自動適應容器的寬度，并且不超出容器，同時能夠平均分布在容器中。

<code>
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
<br>
.item {
flex: 0 0 calc(25% - 10px);
margin: 5px;
}
</code>

上述代碼中，我們除了使用了flex布局和flex-wrap屬性之外，還添加了justify-content屬性和align-items屬性。justify-content屬性用于指定元素在容器中的水平對齊方式，這里我們選擇了space-between，表示元素之間平均分布。align-items屬性用于指定元素在容器中的垂直對齊方式，這里我們選擇了center，表示元素居中對齊。同時，我們還給.item設置了flex屬性，這樣每個.item元素都會占據.container的四分之一寬度，而且之間保留了一定的間隔。

通過以上的例子，我們可以看到，通過使用div和flex布局，我們可以輕松實現內容不超出容器的效果。無論是簡單的自適應容器寬度，還是復雜的平均分布元素，flex布局都能提供靈活的解決方案。希望本文對你理解和應用div和flex布局有所幫助。