本文目錄導(dǎo)讀：

1. Flex 容器
2. Flex 項(xiàng)目
3. Flex 布局屬性

CSS Flex 布局指南

CSS Flex 是一種強(qiáng)大的布局工具，它可以輕松解決許多傳統(tǒng)布局問(wèn)題，在 Flex 布局中，容器可以包含多個(gè)項(xiàng)目，并且容器可以控制項(xiàng)目的位置、大小和順序。

Flex 容器

要?jiǎng)?chuàng)建一個(gè) Flex 容器，你需要將 display 屬性設(shè)置為 flex。

.container {
  display: flex;
}

這將使 .container 元素成為一個(gè) Flex 容器，其直接子元素將成為 Flex 項(xiàng)目。

Flex 項(xiàng)目

在 Flex 容器中，你可以輕松控制每個(gè)項(xiàng)目的大小、位置和順序。

.item {
  flex: 1; /* 項(xiàng)目將占據(jù)可用空間的一部分 */
  margin: 10px; /* 項(xiàng)目之間的間隔 */
}

這將使 .item 元素成為 Flex 項(xiàng)目，每個(gè)項(xiàng)目將占據(jù)容器可用空間的一部分，并在項(xiàng)目之間添加間隔。

Flex 布局屬性

Flex 布局提供了許多屬性，用于更詳細(xì)地控制項(xiàng)目的布局。

flex-direction設(shè)置主軸的方向（row 或 column）。

flex-wrap設(shè)置是否允許換行（nowrap、wrap 或 wrap-reverse）。

flex-flow是 flex-direction 和 flex-wrap 的簡(jiǎn)寫。

align-items設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式（stretch、flex-start、flex-end 或 center）。

justify-content設(shè)置項(xiàng)目在主軸上的對(duì)齊方式（flex-start、flex-end、center、space-between 或 space-around）。

這些屬性可以幫助你更***地控制 Flex 布局的樣式和布局。

CSS Flex 是一種強(qiáng)大的布局工具，可以用于創(chuàng)建各種復(fù)雜的布局，通過(guò)掌握 Flex 容器、項(xiàng)目和布局屬性的使用方法，你可以輕松解決許多傳統(tǒng)布局問(wèn)題，并創(chuàng)建出更加美觀和實(shí)用的網(wǎng)頁(yè)界面。