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

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

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

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

示例代碼：

1
2
3

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

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