CSS Flex布局是一種流式布局，可以輕松地管理和排列網頁上的元素。其中一個常見的應用就是圖片排版和布局。下面是一些關于使用CSS Flex布局排列圖片的示例和技巧。 首先，讓我們來看看如何基于CSS Flex布局實現水平和垂直居中的圖片。使用Flex布局，我們可以創建一個包含圖片的父容器，并將其子元素的flex屬性設置為1。同時，使用justify-content和align-items屬性來控制子元素的水平和垂直位置。

<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
flex: 1;
}
</style>
<div class="parent">
<img src="image.jpg" class="child" />
</div>

這將使圖片在其容器內水平和垂直居中。如果您需要在文字之間嵌入圖片，可以使用Flex布局將其與其他內容對齊，并設置最大寬度和高度，以防止它們過度擴張或縮小。例如，以下代碼將一個圖片和一段文字放在同一個容器中，使它們水平和垂直居中，且圖片的最大寬度和高度為200像素。

<style>
.container {
display: flex;
align-items: center;
}
.image {
max-width: 200px;
max-height: 200px;
}
.text {
margin-left: 10px;
}
</style>
<div class="container">
<img src="image.jpg" class="image" />
<p class="text">這里是一段文字</p>
</div>

最后，如果您需要創建一個不規則的圖片排版，可以將每張圖片包裹在一個子容器中，并使用Flex布局將它們排列成所需的形狀和風格。例如，以下代碼將六張圖片排列為兩行三列的網格，且每個包含圖片的子容器可以自由地移動和調整大小。

<style>
.grid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.item {
flex: 1;
margin: 5px;
overflow: hidden;
}
</style>
<div class="grid">
<div class="item"><img src="image1.jpg" /></div>
<div class="item"><img src="image2.jpg" /></div>
<div class="item"><img src="image3.jpg" /></div>
<div class="item"><img src="image4.jpg" /></div>
<div class="item"><img src="image5.jpg" /></div>
<div class="item"><img src="image6.jpg" /></div>
</div>

總之，CSS Flex布局是一個強大和靈活的工具，用于排列和布局網頁上的元素，包括圖片。無論您需要簡單的垂直居中，還是復雜的不規則排版，Flex布局都可以幫助您輕松地實現。