資訊專欄INFORMATION COLUMN
摘要：為了完成這一目標，它允許容器自己來決定如何均勻地分布其中的元素包括他們的尺寸和他們之間的間距。
作者：Scott Domes
編譯：胡子大哈
翻譯原文：http://huziketang.com/blog/posts/detail?postId=58aaadb2fc5b7f63e8c23f69
英文原文：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-contentjustify-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-selfalign-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 感興趣的童鞋，歡迎指點。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81624.html
摘要：解釋器的利弊解釋器啟動和執行的更快。正是因為這個原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因。可是當你運行同樣的代碼一次以上的時候，解釋器的弊處就顯現出來了。起初，監視器監視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
摘要：解釋器的利弊解釋器啟動和執行的更快。正是因為這個原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因。可是當你運行同樣的代碼一次以上的時候，解釋器的弊處就顯現出來了。起初，監視器監視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
摘要：前言最近學到布局，當時就感覺真是一個布局的神器。友好的提示初學者不易記全所有的屬性和值的左右，鼠標放在屬性名上即可顯示相應屬性的作用。 前言 最近學到Flexbox布局，當時就感覺真是一個布局的神器。終于擺脫了利用各種定位浮動布局的日子。想寫文章總結一下吧，發現介紹Flexbox布局類的文章都被寫爛了，各種大神寫的也是生動形象，單單寫一個布局用法感覺除了自己記錄方便本地查并沒有什么意義...
摘要：我們會在本文給出一個易于理解的入門介紹。項的順序的屬性另外一個的能力，是能夠輕松改變元素的顯示順序。她想讓成為頁面的第一個元素，顯示在之前。可接受的值有，或者一個數字后面緊跟著，，或其他長度單位。 近幾年，CSS領域出現了一些復雜的專用布局工具，用以代替原有的諸如使用表格、浮動和絕對定位之類的各種變通方案。Flexbox，或者說是彈性盒子布局模塊（Flexible Box Layout...
閱讀 1552·2021-09-22 15:52
閱讀 3459·2021-09-22 14:59
閱讀 2843·2021-09-02 15:12
閱讀 971·2021-08-20 09:35
閱讀 1578·2019-08-30 14:09
閱讀 2709·2019-08-30 13:56
閱讀 1646·2019-08-26 18:27
閱讀 3363·2019-08-26 13:37
