本文目錄導(dǎo)讀：

1. 使用CSS Flexbox布局
2. 使用CSS Grid布局

CSS布局技巧：圖片的兩行排列藝術(shù)

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要將圖片進(jìn)行特定的排列，以滿足視覺需求和用戶體驗，本文將介紹如何使用CSS將圖片排列成兩行，使頁面布局更加美觀和有條理。

使用CSS Flexbox布局

Flexbox是CSS3中的一個強大布局工具，可以輕松實現(xiàn)圖片的并行排列，要實現(xiàn)圖片的兩行排列，我們可以首先創(chuàng)建一個包含圖片的容器，然后對該容器應(yīng)用Flexbox屬性。

HTML結(jié)構(gòu)：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- 更多圖片 -->
</div>

CSS樣式：

.image-container {
  display: flex;
  flex-wrap: wrap; /* 允許換行 */
  justify-content: space-between; /* 圖片間保持空間 */
}

通過設(shè)置flex-wrap: wrap;，當(dāng)圖片數(shù)量超過一行時，它們會自動排列到下一行，通過調(diào)整justify-content屬性，可以控制圖片之間的間距。

使用CSS Grid布局

CSS Grid布局是另一種強大的CSS布局工具，適用于復(fù)雜的網(wǎng)頁布局，對于圖片的兩行排列，同樣可以使用Grid布局來實現(xiàn)，創(chuàng)建一個包含圖片的容器，并使用Grid屬性進(jìn)行布局。

HTML結(jié)構(gòu)同上。

CSS樣式：

.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 根據(jù)屏幕大小自動調(diào)整列數(shù) */
  grid-gap: 10px; /* 圖片間的間隙 */
}

使用grid-template-columns屬性，我們可以定義每行的列數(shù)以及每列的寬度，通過設(shè)置repeat和minmax函數(shù)，可以自動適應(yīng)不同屏幕大小下的布局，通過設(shè)置grid-gap屬性，可以控制圖片間的間距，這種方法適用于響應(yīng)式網(wǎng)頁設(shè)計。