在網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)候我們需要將多張圖片按照一行5張的形式排列顯示。這時(shí)，我們可以使用CSS來實(shí)現(xiàn)。下面介紹一下怎么做：

/* CSS代碼開始 */
div {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
img {
width: 20%;
margin: 10px;
}
/* CSS代碼結(jié)束 */

首先，我們需要使用flex布局。將要排列的圖片放在一個(gè)div容器中，設(shè)置display: flex;來啟用flex布局。然后，使用flex-wrap: wrap;來使元素可以換行。

接下來，我們可以設(shè)置圖片的寬度為20%，以便充分利用屏幕寬度。為了使圖片之間有一定的間距，我們可以再添加一個(gè)margin屬性。

現(xiàn)在，我們可以放入五張圖片進(jìn)行測(cè)試：

經(jīng)過測(cè)試，我們可以看到，五張圖片已經(jīng)按照一行五張的形式排列顯示出來了。

最后，再關(guān)注一下CSS的一些細(xì)節(jié)：

/* CSS代碼開始 */
img {
object-fit: cover;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
/* CSS代碼結(jié)束 */

為了保持圖片比例，我們可以使用object-fit: cover;來填充元素的內(nèi)容區(qū)域。如果需要添加一些陰影效果，可以使用box-shadow屬性。這里我們?cè)O(shè)置了一個(gè)2px的陰影，透明度為0.4，可以根據(jù)需要進(jìn)行調(diào)整。

這樣，我們就完成了一行五張圖片的排列顯示。如果需要更多細(xì)節(jié)的調(diào)整，可以對(duì)CSS代碼進(jìn)行進(jìn)一步的修改。