Flex布局詳解

Flex 布局是一種用於頁面布局的 CSS3 特性，它給開發者帶來了 方便、快捷 且 靈活 的布局方式，因此備受開發者的青睞。那接下來我們就通過阮一峰老師的語言，從多個方面對 Flex 布局進行詳細闡述。

一、基本概念

1、Flex容器(container)和Flex項目(item)

Flex 容器是一個 DOM 元素，它的所有子元素都是 Flex 項目。而 Flex 項目則是一個 Flex 容器的直接子元素。下面是一個簡單的代碼示例：

.container {
  display: flex;
}

.item {
  /* 作為 Flex 項目時的屬性 */
}
<div class="container">
  <div class="item">項目1</div>
  <div class="item">項目2</div>
  <div class="item">項目3</div>
</div>

2、Flex容器的主軸和交叉軸

當通過 display: flex; 將一個容器設置為 Flex 容器後，它的子元素就可以利用 Flex 的強大布局方式了。在 Flex 布局中，有兩個概念非常重要：主軸和交叉軸。

主軸是 Flex 容器的主要方向，我們可以使用 justify-content 屬性來設置主軸上的對齊方式，而 Flex 項目則默認在主軸上排列。

交叉軸則是主軸所在的垂直於它的方向。我們可以使用 align-items 和 align-content 屬性來設置交叉軸的對齊方式。

二、Flex屬性詳解

1、flex-direction 屬性

flex-direction 是用來設置主軸的方向。默認值是 row，表示主軸從左向右排列。下面的例子將主軸方向設置為從上至下：

.container {
  display: flex;
  flex-direction: column;
}

2、justify-content 屬性

justify-content 是用來設置主軸上的對齊方式。默認值是 flex-start，表示 Flex 項目在主軸上排列時，都是靠左對齊。下面的例子將主軸方向設置為從上至下，並將 Flex 項目在主軸上的對齊方式設置為居中：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

3、align-items 和 align-content 屬性

align-items 和 align-content 屬性用來設置交叉軸上的對齊方式。align-items 屬性主要作用於單行的 Flex 容器，而 align-content 則作用於多行的 Flex 容器。下面的例子將主軸方向設置為從上至下，並將 Flex 項目在交叉軸上的對齊方式設置為居中：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

三、Flex項目屬性詳解

1、order 屬性

order 是用來設置 Flex 項目的排列順序。該屬性接受一個整數值，默認值為 0。當多個 Flex 項目的 order 屬性不同時，會按照 order 值的大小進行排序，從小到大排序。下面的例子將第一項項目的 order 屬性設置為 2，第二項項目的 order 屬性設置為 -1，第三項項目的 order 屬性設置為 3，效果如下：

.item:nth-child(1) {
  order: 2;
}

.item:nth-child(2) {
  order: -1;
}

.item:nth-child(3) {
  order: 3;
}

2、flex-grow 屬性和 flex-shrink 屬性

flex-grow 和 flex-shrink 屬性用來控制 Flex 項目的自適應能力。其中，flex-grow 屬性表示 Flex 項目在分配剩餘空間時，所佔據的比例值；flex-shrink 屬性則表示 Flex 項目在空間不足時，所佔據的比例值。下面的例子將第一項項目的 flex-grow 屬性設置為 1，第二項項目的 flex-grow 屬性設置為 2，第三項項目的 flex-grow 屬性設置為 3，效果如下：

.item:nth-child(1) {
  flex-grow: 1;
}

.item:nth-child(2) {
  flex-grow: 2;
}

.item:nth-child(3) {
  flex-grow: 3;
}

3、flex-basis 屬性和 flex 屬性

flex-basis 屬性和 flex 屬性用來設置 Flex 項目的佔比大小。其中，flex-basis 表示 Flex 項目在不受強制約束的情況下所佔據的空間大小，flex 屬性則用於將 flex-grow、flex-shrink 和 flex-basis 三個屬性合併成一行。下面的例子將第一項項目的 flex-basis 屬性設置為 30%，第二項項目的 flex 屬性設置為 2 1 auto，第三項項目的 flex 屬性設置為 3 1 100px，效果如下：

.item:nth-child(1) {
  flex-basis: 30%;
}

.item:nth-child(2) {
  flex: 2 1 auto;
}

.item:nth-child(3) {
  flex: 3 1 100px;
}

四、Flex布局實用技巧

1、自定義Flex項目間距

在默認情況下，Flex 項目之間是沒有間距的。然而，在實際開發中，我們經常需要在 Flex 項目之間添加一些間距。下面就是一個簡單的代碼示例，將 Flex 項目之間設置成 20px 的間距：

.item + .item {
  margin-left: 20px;
}

2、應用Flex布局時，父元素不覆蓋子元素

再使用 Flex 布局時，我們經常會遇到這麼一種情況：父元素沒有設置高度，而子元素卻設置了高度，導致父元素將其覆蓋。下面通過在最後一個項目上添加一個 margin-bottom: auto; 來解決這個問題：

.container {
  display: flex;
  flex-direction: column;
}

.item:last-child {
  margin-bottom: auto;
}

3、Flex項目自動換行

當 Flex 容器的空間不足以容納所有Flex 項目時，Flex 項目會自動換行。下面是一個簡單的代碼示例：

.container {
  display: flex;
  flex-wrap: wrap;
}

五、總結

本文通過多個方面對 Flex 布局進行了詳細闡述。從基本概念、Flex 屬性詳解、Flex 項目屬性詳解以及 Flex 布局實用技巧四個方面進行了詳細介紹。希望阮一峰老師原創的這篇文章對大家在開發中應用 Flex 布局有所幫助。