通過動圖形象地為你介紹 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 ，你有五個選擇：
-
flex-start
-
flex-end
-
center
-
space-between
-
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 命令。
-
flex-start
-
flex-end
-
center
-
stretch
-
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 教程，或者這篇教程對你有所幫助，請在下面給我點贊吧，或者給我留言。
感謝你的閱讀！
來自：https://segmentfault.com/a/1190000008414812