在Web開發中，CSS是一個非常重要的技術要素。而其中，CSS中Flex布局又是一種非常常用的布局方式。它可以讓我們以一種簡單、直觀的方式來定義元素在容器中的位置和大小，幫助我們快速構建頁面。但是，在使用Flex布局時，有時會遇到一些元素超出了容器的情況，這個時候該怎么解決呢？

在Flex布局中，通常使用align-items和justify-content兩個屬性來控制元素在容器中的位置。其中，align-items屬性會影響垂直方向上的對齊方式，justify-content屬性會影響水平方向上的對齊方式。當某個元素的寬度或高度超出了容器的范圍時，我們可以使用overflow屬性來控制元素的溢出方式。

.container {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.item {
width: 300px;
height: 200px;
background-color: #ccc;
position: relative;
}
.item img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在上述代碼中，我們將容器設置為了Flex布局，使用align-items和justify-content將其中的元素居中對齊。而在.item元素中，我們使用了position和transform屬性來在其中垂直和水平方向上將圖片展示在中間位置。但是，如果圖片的大小超出了.item元素的寬度或高度，我們又該如何控制其溢出呢？

在這里，我們使用了overflow屬性，并將其設置為hidden。這樣，當.item元素中的圖片超出了其大小時，就會被隱藏起來，不會對頁面造成影響。我們也可以將其設置為auto，這樣就可以通過滾動來查看全部內容。

在實際的開發過程中，超出容器的問題是非常常見的。通過Flex布局的align-items、justify-content屬性和overflow屬性，我們可以輕松的控制元素的位置和溢出方式，幫助我們構建出更加完美的頁面。