隨著移動設備的普及，響應式布局和彈性布局越來越受到前端開發者的青睞。本文將介紹一個基于CSS彈性布局的案例，通過此案例了解如何使用彈性布局實現響應式布局。

/* HTML代碼 */
<div class="container">
<div class="item">
<img src="http://dummyimage.com/600x400/000/fff">
</div>
<div class="item">
<img src="http://dummyimage.com/400x600/000/fff">
</div>
<div class="item">
<img src="http://dummyimage.com/300x300/000/fff">
</div>
</div>
/* CSS代碼 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
}
.item {
width: calc(33.33% - 10px);
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.item {
width: calc(50% - 10px);
}
}
@media screen and (max-width: 480px) {
.container {
justify-content: center;
}
.item {
width: 100%;
}
}

本案例實現了一個圖片展示的布局，通過CSS彈性布局可以讓圖片在不同屏幕尺寸下自動適應并排布局。其中，container類設置了彈性布局，同時flex-wrap屬性指定了換行，justify-content屬性指定了網格間距，max-width屬性指定了最大寬度和居中對齊。item類設置了每個網格的寬度和下邊距。通過媒體查詢@media，可以在不同屏幕尺寸下調整item類的寬度和彈性容器container類的對齊方式。