網頁設計：浮動或flexbox？

Question

我是新的前端設計，當我查看有關此信息時，我發現了兩種關於定位的技術：float和flexbox。

我的問題是：我應該多用些什麼？我也面向移動設計。

Answer 1

由於this great article總結道：

---

花車

優勢

• 打下的事情了最流行的方式;大多數網格框架都遵循這一點。
• 每個人都知道由於浮動的普及而導致的浮動錯誤，並且有很好的文檔記錄方法來克服它們。

缺點

• 需要清除。如果您在2-3個媒體查詢斷點處更改寬度，可能會非常痛苦，因爲需要多次清除浮點數。
• 沒有垂直居中
• 沒有相等的高度
• 沒有源順序獨立

用於：不需要相等的高度

• 大布局塊和垂直居中

---

個

Flexbox的

優勢

• 源順序獨立。對於響應式佈局可能具有巨大的價值，並且不需要爲此提供JS。
• 垂直居中
• 相等的高度
• 的Flex箱待着interchangebly X和Y軸，如此輕而易舉，你真的可以改變的事情有幾個屬性的周圍。
• 框的增長和縮小，可以是列或行，但適合可用空間，但是你希望聲明這一點。
• 有多種方式可以用flexbox做同樣的事情。

缺點

• 語法最初是不直觀。你花了幾個小時看着演示WOW的演示，然後是WTF。
• 我一直在注意奇怪的跨瀏覽器不一致[...]
• 對Flexbox的深入理解需要一段時間。一旦佈局變得更加複雜，或者您添加了幾個div，事情就會變得混亂。我將在文章中更詳細地記錄這一點。
• 很多供應商前綴，對舊版IE和Webkit使用不同的語法。使用像Autoprefixr這樣的解決方法。或者寫一些mixin。或者做些什麼..
• 在IE9上不起作用。如果你不需要支持IE9，你沒事。
• 舊語法影響性能的報告。我不會太在意這個誠實，尤其是如果你使用JS做的事情Flexbox的現在可以...

使用

• 你已經可以開始使用它了垂直居中，如果你不需要在IE9上看起來相同的東西。
• 如果您不需要IE9支持，那麼它非常適合獨立於源代碼的佈局，等高。
• 我強烈建議將它用於個人項目。
• 應用佈局，其中的東西需要伸展和擠壓。 Flexbox真的在這裏閃耀。

---

因此，要回顧一下」，Flexbox的是現代的方式，非常強大但很難學會。由於它是一種新的，也有很多的錯誤，它不是很好的兼容。 花車是舊的方式：它更基本，但易於使用。