如果一張圖片勝過千言萬語 —— 那么動畫呢？ 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 來反轉項目的實際順序。

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 可伸縮性產生影響。

以上！希望你能夠喜歡這篇文章。

總結

以上是生活随笔為你收集整理的flex 修改生成html,CSS Flex –动画教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。