深度剖析 flex 布局

一、flex 布局概述

flex 布局是 CSS3 引入的一種布局方式，它能夠很好地解決傳統布局中難以解決的一些問題。它使用起來簡單易懂，對於響應式布局也能夠提供方便。使用 flex 布局需要了解以下幾個特性：

1. 容器屬性

flex 布局的容器使用 display: flex; 聲明，它的屬性有：

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | flex-end | center | baseline;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

2. 項目屬性

flex 容器內的項目使用 flex: <flex-grow> <flex-shrink> <flex-basis>; 聲明，或者使用簡寫形式 flex: <flex-grow> <flex-shrink>;，它的屬性有：

.item {
  flex: <number> <number> <length> | auto | initial;
  order: <integer>;
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

二、 flex 布局實踐

在實踐中，flex 布局經常使用在以下幾個場景：

1. 響應式布局

使用 flex 布局能夠輕鬆實現響應式布局，它能夠自適應不同寬度的屏幕。下面是一個使用 flex 布局實現響應式的代碼示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 33%;
  height: 100px;
  background-color: #f2f2f2;
}

上面的代碼能夠在不同寬度的設備上自適應，並且能夠實現等寬、等高的三列布局。

2. 水平居中與垂直居中

使用 flex 布局能夠輕鬆實現水平垂直居中，以下是一個使用 flex 布局實現垂直水平居中的代碼示例：

<div class="container">
  <div class="item">Flex</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.item {
  background-color: #f2f2f2;
  padding: 20px;
}

上面代碼能夠實現一個寬高自適應的容器，容器內的項目能夠實現水平居中和垂直居中。

3. 布局排列

使用 flex 布局可以輕鬆實現項目的排列，以下是一個使用 flex 布局實現左側固定寬度，右側自適應寬度的代碼示例：

<div class="container">
  <div class="item item-left">固定寬度</div>
  <div class="item item-right">自適應寬度</div>
</div>

.container {
  display: flex;
}
.item-left {
  width: 100px;
  background-color: #f2f2f2;
}
.item-right {
  flex: 1;
  background-color: #e6e6e6;
}

上面代碼實現左側固定寬度，右側自適應寬度，並使用了 flex 布局的 flex: 1; 屬性。

三、 flex 布局實例

下面是一些在實際項目中使用 flex 布局並且比較實用的代碼示例：

1. 九宮格布局

九宮格布局是移動端開發中經常使用的一種布局方式，以下是一個使用 flex 布局實現的代碼示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item {
  width: 33%;
  height: 100px;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 100px;
}

上面代碼實現了一個寬高相等的九宮格布局，並使用了 flex 布局的 justify-content: space-around; 屬性。

2. 橫向滾動

使用 flex 布局可以輕鬆實現橫向滾動，以下是一個使用 flex 布局實現橫向滾動的代碼示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: flex;
  overflow-x: auto;
}
.item {
  flex: 0 0 200px;
  height: 200px;
  background-color: #f2f2f2;
  margin-right: 20px;
}

上面代碼實現了一個橫向滾動的容器，容器內的項目使用了 flex 布局的 flex: 0 0 200px; 屬性。

3. 活動標籤布局

使用 flex 布局可以輕鬆實現活動標籤布局，以下是一個使用 flex 布局實現活動標籤布局的代碼示例：

<div class="container">
  <div class="item active">標籤1</div>
  <div class="item">標籤2</div>
  <div class="item">標籤3</div>
  <div class="item">標籤4</div>
  <div class="item">標籤5</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.item {
  flex: 1;
  text-align: center;
  line-height: 50px;
  background-color: #f2f2f2;
  cursor: pointer;
}
.item.active {
  background-color: #1890ff;
  color: #fff;
}

上面代碼實現了一個活動標籤布局，使用了 flex 布局的 justify-content 和 align-items 屬性，並使用了 active 類來實現選中狀態。

結語

本文介紹了 flex 布局的概述、實踐以及實例，從而能夠更好地掌握 flex 布局的使用。