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

翻譯 | web前端開(kāi)發(fā)（ID：web_qdkf)

介紹

Flexbox已是CSS的大功能之一。它被設(shè)計(jì)為布局模型，并且設(shè)計(jì)為可以在界面中的項(xiàng)目之間提供空間分布并具有強(qiáng)大的對(duì)齊功能的方法。

Flexbox無(wú)需使用浮動(dòng)或定位即可輕松的實(shí)現(xiàn)響應(yīng)式布局結(jié)構(gòu)。

在本文中，我們將通過(guò)一些實(shí)際示例來(lái)學(xué)習(xí)CSS flexbox。讓我們開(kāi)始吧。

定義一個(gè)容器

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

  1  2  3

div通過(guò)將display屬性設(shè)置為flex，可以使父項(xiàng)或容器變得靈活：

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

輸出結(jié)果如下：

包含三個(gè)div的紅色容器

如你所見(jiàn)，通過(guò)將display屬性設(shè)置為flex，容器的子元素將自動(dòng)變?yōu)閺椥皂?xiàng)目。現(xiàn)在，你可以使用容器屬性justify-content align-items，例如，以便使子元素在容器div中居中。我們將在下面的示例中進(jìn)行介紹。

flex-direction屬性

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

下面的示例將flex-direction設(shè)置為column（從上到下）。結(jié)果，容器div中的子元素將處于垂直線(xiàn)。

看下面的例子：

.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;}

輸出結(jié)果如下：

列方向

下面這個(gè)實(shí)例，我們將flex-direction屬性設(shè)置為row，這將使我們的容器內(nèi)的元素在一條水平線(xiàn)上：

.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;}

輸出結(jié)果如下：

你還可以通過(guò)將flex-direction屬性設(shè)置為column-reverse或來(lái)反轉(zhuǎn)容器中子元素的順序row-reverse。

flex-wrap屬性

flex-wrap屬性是指彈性項(xiàng)目。

下面的示例包含12個(gè)flex項(xiàng)目，并將屬性設(shè)置flex-wrap為wrap。為了更好地演示該flex-wrap屬性。

我建議你將下面的代碼放在文本編輯器或Codepen中，并調(diào)整瀏覽器窗口的大小以查看的功能flex-wrap。

HTml:  1  2  3
    4  5  6
    7  8  9
    10  11  12
  
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包括子元素，則可以將屬性設(shè)置為nowrap，如下所示：

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

justify-content屬性

justify-content屬性用于對(duì)齊彈性項(xiàng)目。你可以給這個(gè)屬性一些值，如：center，flex-start，flex-end，space-between等。

將justify-content屬性設(shè)置為center：

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

將justify-content屬性設(shè)置為flex-start：

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

將justify-content屬性設(shè)置為flex-end：

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

將justify-content屬性設(shè)置為space-between：

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

align-items屬性

align-items屬性用于對(duì)齊彈性項(xiàng)目。與justify-content基本相同，但align-items是垂直而不是水平。這就是為什么我只給出一個(gè)示例，而不是重復(fù)相同的示例。

因此，以下示例將子元素垂直居中放置在容器中：

.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;}

輸出結(jié)果如下：

將子元素垂直居中

align-items屬性的值與justify-content相同。唯一的區(qū)別是，align-items在垂直而不是水平地工作。

垂直和水平居中

現(xiàn)在，你可以同時(shí)使用justify-content和align-items同時(shí)將子元素垂直和水平居中。

這是一個(gè)例子：

.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;}

垂直和水平居中

子元素

你還應(yīng)該了解一下以下的子元素，我想你會(huì)從中受益的，例如：

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

結(jié)論

Flexbox是一項(xiàng)很棒的CSS功能，可讓你輕松設(shè)計(jì)靈活的響應(yīng)式布局結(jié)構(gòu)。我強(qiáng)烈建議你練習(xí)此功能，因?yàn)榫毩?xí)是提高此功能的唯一方法。

本文完?

詳解CSS Flexbox，附帶示例

介紹

定義一個(gè)容器

flex-direction屬性

flex-wrap屬性

justify-content屬性

align-items屬性

垂直和水平居中

子元素

結(jié)論