CSS中的flex可以幫助我們更方便地布局一個網頁，這個屬性允許我們將一個容器（如 div）中的元素，按照一定的規則，沿著一個方向排布。

上述代碼就是一個包裹在class為container的div元素中，使用flex布局。當這個div元素設置為flex后，內部所有的子元素就可以非常自由地排布了。

接下來我們就可以使用flex的各種屬性來掌控這些元素了：

• flex-direction:控制子元素的排列方向（默認為row橫向排列）
• justify-content:控制子元素在主軸上的對齊方式（如start向左對齊）
• align-items:控制子元素在側軸上的對齊方式（如center上下對齊）
• flex-wrap:控制子元素的折行方式
• flex-grow:控制子元素的自動擴展比例（默認為0不擴展）

示例代碼：

1
2
3

上述代碼中，我們設置了一個class為container的div元素，使用flex布局，并指定了justify-content為center，align-items為center（子元素居中）。同時子元素也都設置了flex屬性（大于0的數值），表示可以在容器中自動擴展，同時flex值越大擴展的比例就越大，因此第二個元素會擴展得比其他元素更多。

總而言之，使用flex布局可以讓我們更加簡單、方便地控制元素的排布，強烈推薦大家嘗試使用。