經過動圖學習 CSS Flex

翻譯：瘋狂的技術宅

原文：https://www.freecodecamp.org/...

未經容許嚴禁轉載

若是一張圖片賽過千言萬語 —— 那麼動畫呢？ Flex 沒法經過文字或靜態圖像有效地徹底解釋。爲了鞏固你對flex的瞭解，我製做了這些動畫演示。

注意 overflow: hidden 行爲類型是默認值，由於 flex-wrap 還未設置。

爲了得到更好的想法，你能夠在這個頁面上去嘗試一下 Flex Layout Editor。

按默認 flex不會包裝你的內容。它的工做原理很像 overflow: hidden。

可能你在學習 flex 時第一個接觸到的就是 flex-wrap。

Flex Wrap

讓咱們添加 flex-wrap:wrap 來看看它是如何改變 flex 項的行爲的。

基本上，它只會擴展容器高度並將物品包裹起來。

注意：即使是未指定容器得高度（auto/unset）仍然會這樣。

wrap

若是你有一些內容大小未知且數量也未知的項目，而且但願在屏幕上所有顯示它們時，這是一種常見模式。

能夠用 flex-direction: row-reverse 來反轉項目的實際順序。

這能夠用於須要從右到左的順序閱讀的內容。

你能夠 「float:right」 全部與 flex-end 在同一行上的項目。

這與 row-reverse 不一樣，由於它保留了項目的順序。

Justify Content

justify-content 屬性負責 flex 項目的水平對齊。

它看起來很像前面的例子……除了項目的順序。

flex-end

在如下示例中（justify-content: center），全部項目將天然地彙集到父容器的中心 —— 不管其寬度怎樣。它與 position: relative; margin: auto 類似。

center

Space between 意味着全部 內部 項目之間有空格：

space-between

下面這個彷佛與上面的徹底相同。那是由於它的內容一樣是整個字母表。若是用較少的彈性項目，效果會更明顯。它們的不一樣之處是處於角落的項目的外邊距。

使用 space-between 屬性（上圖）處於角落的項目沒有外邊距。

使用 space-around 屬性（下圖）全部項目的邊距相同。

space-around

下面這個動畫是相同的例子，只不過 middle 元素更寬一些。

space-around

儘管你在前面看到了這些演示，但你仍然須要在本身的環境中去嘗試 flex，這樣才能是你真正理解佈局。這也是我決定製做本教程的緣由。這些動畫受限於項目大小。你嘗試的結果可能會因內容的具體狀況而異。

對齊內容

上面的全部例子都涉及 justify-content 屬性。不過即使涉及到自動折行，你也能夠在 flex 中進行垂直對齊。

屬性 justify-content（上面的全部示例）和 align-content（下面）採用徹底相同的值。它們僅在兩個不一樣的方向上對齊 —— 相對於存儲在柔性容器中的項目的垂直和水平方向上。

接下來探討 flex 如何處理垂直對齊：

align-content:space-evenly

關於 space-evenly 的一些現象：

• Flex 自動分配足夠的垂直空間。
• 項目行與相等的垂直邊距空間對齊。

固然，你仍然能夠修改父級的高度，而且全部內容仍然能夠正確對齊。

實際應用中的狀況

在實際佈局中，你不會有一長串的文字，你將會使用一些獨特的內容元素。到目前爲止我只簡單演示了動畫中的 flex 是如何工做的。

當涉及到實際佈局時，你可能但願對較少同時更大的項目使用 flex。就像真正網站上的那些內容同樣。

咱們來看幾個想法……

均勻排列

對於 align-content 和 justify-content 使用 space-evenly 會對具備5個正方形的一組項目產生如下影響：

奇數項目的效果不是很好

當涉及 flex 的開箱即用的響應區域時，首先要確保儘量使項目的寬度保持相同。

請注意，由於此示例中的項目數爲 奇數個（5），因此這種狀況不會產生你想要的那種理想的響應效果。使用偶數數字能夠解決這個微妙的問題。

如今，考慮將相同的 flex 屬性用在偶數個項目上：

以更天然的方式響應偶數個項目

使用偶數個項目，你能夠實現更清晰的響應式縮放，而無需用 CSS Grid 或 JavaScript magic。

十多年來，在佈局設計中垂直居中的項目已成爲一個巨大的問題。

最後用 flex 解決了。 （呃……你也能夠用 css grid 來解決。）

可是在 flex 中，在兩個維度中使用 space-evenly 值會對內容自動調整，即便項目的高度可變：

完美的對多個不一樣高度的項目垂直對齊

以上是對將來10年最經常使用的響應式 flex 的描述（開個玩笑😆）。

若是你正在學習flex，你會發現這一般是最有用的一組 flex 屬性。

最後，下面的動畫演示了全部可能會用到的值：

flex-direction: row; justify-content: [value];

flex-direction: column; justify-content: [value];

我建議你在 CSS grid 中使用這些類型的 flex 項目。 （你用的越多就會越明白 grid + flex。）不過使用 flex-only 佈局也沒有任何問題。

要明確指定元素的大小

若是不這樣作，一些 flex 縮放將沒法正常工做。

相應地使用 min-width，max-width 和 width / height。

這些屬性能夠對整個 flex 可伸縮性產生影響。

以上！但願你可以喜歡這篇文章。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...