經過動圖學習 CSS Flex

翻譯:瘋狂的技術宅css

原文:www.freecodecamp.org/news/the-co…html

聲明:未經容許嚴禁轉載前端

CSS Flex – Animated Tutorial

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

img

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

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

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

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

Flex Wrap

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

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

**注意:**即使是未指定容器得高度(auto/unset)仍然會這樣。

wrap

wrap

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

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

row-reverse

row-reverse

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

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

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

Justify Content

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

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

flex-end

flex-end

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

center

center

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

space-between

space-between

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

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

使用 space-around 屬性(下圖)全部項目的邊距相同

space-around

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

img

space-around

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

對齊內容

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

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

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

align-content:space-evenly

align-content:space-evenly

關於 space-evenly 的一些現象:

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

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

實際應用中的狀況

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

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

咱們來看幾個想法......

均勻排列

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

奇數項目的效果不是很好

奇數項目的效果不是很好

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

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

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

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

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

使用偶數個項目,你能夠實現更清晰的響應式縮放,而無需用 CSS GridJavaScript magic

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

最後用 flex 解決了。 (呃......你也能夠用 css grid 來解決。)

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

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

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

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

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

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

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

img

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

img

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

要明確指定元素的大小

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

相應地使用 min-widthmax-widthwidth / height

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

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

歡迎關注前端公衆號:前端先鋒,獲取前端工程化實用工具包。

相關文章
相關標籤/搜索