詳解CSS Flexbox，附帶示例

英文 | https://medium.com/javascript-in-plain-english/css-flexbox-explained-with-examples-85efa38e4770

翻譯 | web前端開發（ID：web_qdkf)

介紹

Flexbox已是CSS的大功能之一。它被設計為布局模型，并且設計為可以在界面中的項目之間提供空間分布并具有強大的對齊功能的方法。

Flexbox無需使用浮動或定位即可輕松的實作響應式布局結構。

在本文中，我們将通過一些實際示例來學習CSS flexbox。讓我們開始吧。

定義一個容器

在開始使用flexbox，你需要定義一個容器div或一個父容器，在div中包括所有子元素，如下所示：

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

div通過将display屬性設定為flex，可以使父項或容器變得靈活：

.container {
  display: flex;
  background-color: red;
}
.container div{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}      

輸出結果如下：

包含三個div的紅色容器

如你所見，通過将display屬性設定為flex，容器的子元素将自動變為彈性項目。現在，你可以使用容器屬性justify-content align-items，例如，以便使子元素在容器div中居中。我們将在下面的示例中進行介紹。

flex-direction屬性

flex-direction屬性定義容器要在哪個（列或行）方向上堆疊彈性。

下面的示例将flex-direction設定為column（從上到下）。結果，容器div中的子元素将處于垂直線。

看下面的例子：

.container {
  display: flex;
  flex-direction: column;
  background-color: red;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}      

輸出結果如下：

列方向

下面這個執行個體，我們将flex-direction屬性設定為row，這将使我們的容器内的元素在一條水準線上：

.container {
  display: flex;
  flex-direction: row;
  background-color: red;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}      

輸出結果如下：

行方向

你還可以通過将flex-direction屬性設定為column-reverse或來反轉容器中子元素的順序row-reverse。

flex-wrap屬性

flex-wrap屬性是指彈性項目。

下面的示例包含12個flex項目，并将屬性設定flex-wrap為wrap。為了更好地示範該flex-wrap屬性。

我建議你将下面的代碼放在文本編輯器或Codepen中，并調整浏覽器視窗的大小以檢視的功能flex-wrap。

HTml:
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>
CSS:
.container {
  display: flex;
  flex-wrap: wrap;
  background-color: red;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}      

如果不希望flex-item包括子元素，則可以将屬性設定為nowrap，如下所示：

.container {
  display: flex;
  flex-wrap: nowrap;
  background-color: red;
}      

justify-content屬性

justify-content屬性用于對齊彈性項目。你可以給這個屬性一些值，如：center，flex-start，flex-end，space-between等。

将justify-content屬性設定為center：

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

将justify-content屬性設定為flex-start：

.container {
  display: flex;
  justify-content: flex-start;
}      

将justify-content屬性設定為flex-end：

.container {
  display: flex;
  justify-content: flex-end;
}      

将justify-content屬性設定為space-between：

.container {
  display: flex;
  justify-content: space-between;
}      

align-items屬性

align-items屬性用于對齊彈性項目。與justify-content基本相同，但align-items是垂直而不是水準。這就是為什麼我隻給出一個示例，而不是重複相同的示例。

是以，以下示例将子元素垂直居中放置在容器中：

.container {
  display: flex;
  height: 300px;
  align-items: center;
  background-color: red;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}      

輸出結果如下：

将子元素垂直居中

align-items屬性的值與justify-content相同。唯一的差別是，align-items在垂直而不是水準地工作。

垂直和水準居中

現在，你可以同時使用justify-content和align-items同時将子元素垂直和水準居中。

這是一個例子：

.container {
  display: flex;
  height: 300px;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}      

垂直和水準居中

子元素

你還應該了解一下以下的子元素，我想你會從中受益的，例如：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

結論

Flexbox是一項很棒的CSS功能，可讓你輕松設計靈活的響應式布局結構。我強烈建議你練習此功能，因為練習是提高此功能的唯一方法。

本文完〜