css - Flexbox所涵蓋的哪些領域很難或無法通過Grid實現?




css-grid (2)

人們普遍認為Flexbox適用於1-D而Grid適用於2-D,但我沒有找到明確解釋為什麼Grid不能用於1-D並取代Flexbox。 我最接近的

但你也可以說,像這樣的純粹1D佈局在Flexbox中更強大,因為Flexbox允許我們更容易地移動這些元素(例如將它們全部移動到一側或另一側,改變它們的順序,將它們均勻地分開等)。

我使用Grid和Flexbox進行基本佈局:在頁面上放置框的常規位置和一些通常堆疊的動態框。 美學家(烤麵包機,模態,...)通過框架進行管理。 我還沒有發現Grid無法取代開箱 用的Flexbox (即沒有高級CSS體操或大量代碼)。

舉一個上面引用的例子,提到的所有“移動”都可以在Grid中直接使用,通常具有與Flexbox相同的語義。

Flexbox所涵蓋的哪些基本領域很難或無法使用Grid進行管理?

編輯:瀏覽器支持並不重要(我只使用常青瀏覽器,如果需要可以切換)


優勢Flexbox

以下是flexbox在 Grid(Level 1) 之前出現的10個區域:

  1. 居中包裹的物品。 想像一下五個彈性項目。 每行只有四個。 第五個包裹。 第五個可以通過對齊內容在整個行中輕鬆對齊。 嘗試將第五個項目集中在網格容器中。 不是一件簡單的事情。

    在整個行/列中對齊網格項(如彈性項可以)

    如何將CSS Grid中最後一行的元素居中?

  1. 包裝。 可變長度的Flex項目包裝沒有問題。 嘗試獲取可變長度的網格項以進行換行。 不可能。

    如何獲取不同長度的網格項目?

  1. 自動保證金。 柔性物品可以在整個容器中放置,包裝和隔開,並帶有 auto 邊距。 但是,網格項目僅限於它們的軌道,大大降低了 auto 邊距的效用。

    可以像在Flexbox中一樣在CSS Grid中使用自動邊距嗎?

  1. 最小值,最大值,默認值 - 一體化。 設置彈性項目的 min-widthmax-width 和默認 width 很容易。 如何在網格列或行上設置所有三個長度? 他們不能。

    設置網格列/行的最小,最大和默認長度

  1. 粘滯的頁腳/標題。 使用flexbox固定頁腳或頁眉更簡單,更容易。

    如何使用CSS Grid佈局粘貼頁腳?

  1. 消耗剩餘空間。 Flex項目可以通過 flex-grow 消耗剩餘空間。 網格項沒有這樣的功能。

    使用flex-grow:1使網格項目像彈性項目一樣使用剩餘空間

    如何使最後一行中的項目消耗CSS Grid中的剩餘空間?

    如何使CSS Grid最後一行佔用剩餘空間

  1. 萎縮。 Flex具有 flex-shrink 。 網格......沒什麼。

    收縮網格項目就像css中的flex項目一樣

  1. 限制動態佈局中的列數。 使用flexbox,創建一個包裹的雙列網格,在網格大小的兩列中保持固定是沒有問題的。 在Grid中,儘管具有所有這些重要功能,例如 repeat()auto-fillminmax() ,但它無法完成。

    使CSS網格自動填充僅2列

    沒有媒體查詢的CSS網格最大列

  1. 在第一個和最後一個項目之間創建空 在具有可變列數的網格容器中,添加空的第一列和最後一列並不容易。 邊距,填充,列和偽元素都有其局限性。 使用flexbox簡單易用。

    在第一個和最後一個網格項之前和之後添加空格

  1. 在某些情況下,內聯級容器的一個重要好處是丟失了。 如果您的網格佈局具有動態列數 - 意味著您無法設置容器的列數或寬度 - 則 display: inline-grid 不起作用。 所有項目都堆疊在一列中。 這是因為 grid-auto-columns 上的默認設置是一列。 至少在某些情況下,flexbox可以解決問題。

    如何使網格容器縮小以適應內容?


Flexbox和CSS網格是兩個不同的功能,我不同意說可以替換另一個或CSS網格是flexbox的超集。

你說:

我還沒有找到一個明確的解釋,為什麼Grid不能用於1-D並取代Flexbox。

這是一個基本的flexbox示例,涉及使用CSS網格無法實現(或可能難以實現)的包裝。 減小窗口大小並查看元素的行為方式。

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>span {
  border: 1px solid;
  padding: 10px;
  flex-grow: 1;
}
<div class="box">
  <span>some text very long here some text very long here </span>
  <span>text here</span>
  <span>A</span>
  <span>B</span>
</div>

這是一維佈局,其中每條線可能具有根據自由空間不同地調整大小而不在二維網格內的元素。 使用CSS網格很難實現相同的輸出。

基本上,當涉及到一個方向的 多行/多行內容 時,flexbox更適合,而CSS網格更多地是關於具有 行和列 的網格。 當然,當涉及到一條線時,2D網格可以被視為1D,因此flexbox和CSS網格可以實現相同的目的。

這就像比較一個只有一個 tr 和多個 td 的表和一行內的一行 inline-block 元素但是當涉及到包裝和多個 tr ,很明顯表和 inline-block 是不同的。

值得注意的是,你可以使用任何技術來達到你想要的效果。 在過去,Flexbox不存在,開發人員能夠使用 float 構建佈局(Boostrap是最好的例子)。 然後,flexbox具有更強大的功能,使事情變得更容易。 CSS網格和未來功能也是如此。

這是一個例子: https://drafts.csswg.org/css-align-3/https://drafts.csswg.org/css-align-3/

本草案討論了未來的對 jutify-content ,我們可以考慮 jutify-contentalign-items 等,甚至不使用flexbox或CSS網格,而是直接使用塊元素。

如果實施,這會使Flexbox和CSS Grid無用嗎? 我不這麼認為。







css-grid