經過動圖形象地爲你介紹 flexbox 是如何工做的（一）

做者：Scott Domes <br/>
編譯：鬍子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58aaadb2fc5b7f63e8c23f69 <br/>
英文原文：How Flexbox works — explained with big, colorful, animated gifs

轉載請註明出處，保留原文連接以及做者信息

---

經過動圖形象地爲你介紹 flexbox 是如何工做的

flexbox 承諾將咱們從萬惡的純 CSS 中拯救出來（如垂直對齊）。

flexbox 也正在實現它的這一目標，可是用戶掌握這一新的模型也將會是個挑戰。

所以在這裏，咱們將會用動圖介紹 flexbox 是如何工做的，使得咱們能夠用它來作更好的佈局。

flexbox 的潛在原則是使得佈局更加靈活和直觀。

爲了完成這一目標，它容許容器本身來決定如何均勻地分佈其中的元素——包括他們的尺寸和他們之間的間距。

這理論上來說，聽起來很美好。可是讓咱們來看一下實踐中會發生什麼。

在這篇文章中，咱們會鑽研5個通用 flexbox 原則。會探索它們都作了什麼？你能夠如何使用它們？以及它們的結果是什麼樣的？

屬性1：display: flex

在一個灰色背景的容器div裏面，有四個顏色不一樣、尺寸不一樣的子div，此時每一個div有默認的display: block，每個的寬度也佔滿了一整行。

爲了使用 flexbox，須要將你的容器放在 flex 容器中 ，見以下代碼：

#container {
  display: flex;
}

能夠看到，發生了一點變化。你的四個div顯示到了一行上，但也就僅此而已。但是你要知道，在這背後，你作了一件頗有 power 的事情。你賦予了你的 div 一個叫作 flex上下文 的東西。

你如今能夠把它應用在你的上下文中了，是否是比傳統的 CSS 簡單不少！

屬性2：flex-direction

一個 flexbox 容器有兩個座標軸：主軸和交叉軸，直觀的來看以下圖：

默認狀況下，元素都是從左到右地分佈在主軸上。這就是爲何當你應用display: flex的時候，形狀默認水平分佈的緣由。

flex-direction，可使你的主軸旋轉。

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

這裏有一個很重要的區別：flex-direction: column並非把你的形狀分佈在交叉軸上。而是使主軸自身發生了旋轉，從水平方向旋轉到了垂直方向。

還有一些其餘的flex-direction可選項，如：row-reverse和column-reverse。

屬性3：justify-content

justify-content控制的是你在主軸上如何對齊元素。

這裏咱們須要對主軸和交叉軸的區別有更深一點的理解。首先讓咱們回到flex-firection: row。

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

使用 justify-content，你有五個選擇：

1. flex-start

2. flex-end

3. center

4. space-between

5. space-around

space-around和space-between是最直觀的。space-between使每一個元素之間有相同的距離，可是不包含元素和容器之間的距離。

space-around讓每一個元素塊的兩側有相同的空隙距離。這就意味着最外層的元素和容器之間的距離，是兩個元素之間距離的一半（每一個元素塊的左右兩側都貢獻了一個不重疊的等距離，所以是兩倍的間隙）。

最後小結：記住justify-content是沿着主軸的，flex-direction是轉換主軸的。這對你之後移動元素很關鍵。

屬性4：align-items

若是你已經消化了justify-content，那麼align-items對你倆講將是垂手可得的事了。

justify-content是沿着主軸的，而align-items是應用到交叉軸上的。

調整flex-direction，使得座標軸看起來和上面的圖同樣。

接下來，咱們一塊兒看一下align-items命令。

1. flex-start

2. flex-end

3. center

4. stretch

5. baseline

前三個和justify-content沒什麼區別，後兩個則有一些不一樣。

stretch你的元素將會被拉伸充滿整個交叉軸。
baseline則會使你的文字底部對齊。見圖知意。

（注意：若是用align-items: stretch，你必需要將元素的height設置成auto，不然height屬性將會覆蓋stretch）

對於baseline要意識到，若是你把文字標籤拿掉，那麼將會用元素的底部對齊來替代原來的效果，以下圖。

爲了更好的展現主軸和交叉軸，咱們結合justify-content和align-items來看一下兩個flex-direction的核心不一樣。

用row，元素被分佈在水平主軸上。
用column，被分佈在垂直主軸上。

在這兩個 case 中，不論垂直仍是水平方向，四個元素都是被居中的，可是這兩種狀況是絕對不能互相替換的。

屬性5：align-self

align-self容許你手動操做一個特定元素的對齊方式。

對於一個元素而言，它基本上是對align-items的覆蓋。儘管align-self默認值設成了auto，可是它和align-items全部的屬性都是同樣的，這也使得這個元素繼承了容器的align-items。

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// 只有這個形狀會居中。

咱們來看一下它設置的結果是什麼樣的。對前兩個形狀設置不一樣的align-self，其餘元素設置爲align-items: center和flex-direction: row。

結論

儘管咱們僅僅講了 flexbox 的皮毛，可是這些命令應該也足夠你應付不少基本佈局了。

若是你還想看到更多的 GIF flexbox 教程，或者這篇教程對你有所幫助，請在下面給我點贊吧，或者給我留言。

感謝你的閱讀！

---

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。