CSS3的display:flex屬性提供了一種簡單的方法來排列和對齊一個容器中的元素。這個屬性將容器的子元素看作彈性盒子，可以通過多種屬性來定義盒子的排列方式、對齊方式和空間分配。

.container{
display:flex; /*啟用彈性布局*/
justify-content:center; /*水平居中*/
align-items:center; /*垂直居中*/
flex-wrap:wrap; /*自動換行*/
}
.item{
flex-basis:200px; /*設置基礎寬度為200px*/
flex-grow:1; /*剩余空間等分*/
flex-shrink:1; /*縮小因子*/
margin:10px; /*盒子間距*/
}

如上面的代碼所示，我們創建了一個容器，并將其display屬性設置為flex。我們還使用了justify-content屬性來水平居中容器中的元素，同時用align-items屬性將它們垂直居中。

在容器中，我們定義了一個.item類，并使用了flex-basis屬性來設置它的基準寬度為200像素。這意味著在沒有其他限制寬度的情況下，該元素的寬度將始終為200像素。

我們還使用了flex-grow和flex-shrink屬性，以控制元素在容器中的分配和調整空間。flex-grow屬性告訴容器，如果有多余空間，元素應該如何分配空間。在這種情況下，我們將其設置為1，這意味著剩余的空間將被等分給所有的.item元素。

flex-shrink屬性告訴容器在空間不足時如何進行調整。我們將其設置為1，這意味著元素可以縮小，以適應容器的大小。

最后，我們設置了盒子間距為10像素，并使用flex-wrap屬性將元素在一行上排列，如果空間不足，將自動換行，以適應容器的大小。