CSS3 Flex盒模型是一種靈活的布局模型，它可以幫助我們更方便地實現橫向布局。在使用Flex時，需要設置父元素的display為flex，并使用flex-wrap屬性來控制子元素的換行方式。 第一步是將父元素的display屬性設置為flex： ```css .container { display: flex; } ``` 接下來，可以通過設置flex-wrap屬性來控制子元素的排列方式。默認情況下，子元素會在一行中排列，如果空間不夠，它們會縮小以適應容器。但是當設置flex-wrap為wrap時，當子元素空間不足時，它們會自動換行。 ```css .container { display: flex; flex-wrap: wrap; } ``` 子元素的位置由其在父容器中的順序決定。可以使用order屬性來改變子元素的順序。該屬性接受整數值，表示子元素的位置。默認值為0，較小的值將使元素更靠近容器的起始位置，較大的值則相反。 ```css .item:nth-child(3) { order: 1; } ``` Flex布局還提供了許多其他可用于調整子元素位置和大小的屬性，如justify-content（控制水平對齊方式）、align-items（控制垂直對齊方式）、flex-grow（定義子元素的擴展比例）和flex-shrink（定義子元素在空間不足時縮小的比例）等等。 ```css .container { display: flex; justify-content: space-between; align-items: center; } .item { flex-grow: 1; } ``` 總之，Flex布局是一種非常強大和靈活的工具，可以幫助我們快速準確地實現復雜的橫向布局。在設計響應式網站時，務必使用Flex來優化設計。