Flexbox vs Grid：基本概念
整個Web在不斷的演進，那麼為Web服務的理念與技術等等也在不斷的進行演化。那麼我們今天要聊的話題，Web佈局中最為優秀的兩種佈局方式：Flexbox佈局和CSS Grid佈局。有關於這兩方面的知識，其實在W3cplus上已經有很多相關的內容。由於這兩種佈局方式對Web佈局帶來了很多改變，而且兩者都有其自身的優勢。正因為如此，很多同學總是會類似的一個問題：應該使用Flexbox還是Grid來進行佈局？那麼我們從這篇文章開始，將會分幾篇文章一起來介紹Flexbox佈局和CSS Grid佈局兩者的差異性？我們又應該如何的選擇，才能更適合我們專案的佈局？希望接下來的內容對大家有所幫助。
簡介
Flexbox佈局簡介
Flexbox佈局（Flexible Box)模組旨在提供一個更加有效的方式制定、調整和分佈一個容器裡的專案佈局，即使他們的大小是未知或者是動態的。（這裡我們稱為Flex）。
Flex佈局主要思想是讓容器有能力讓其子專案能夠改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是為了適應所有型別的顯示裝置和螢幕大小）。Flex容器會使子專案（伸縮專案）擴充套件來填滿可用空間，或縮小他們以防止溢位容器。
最重要的是，Flexbox佈局方向不可預知，他不像常規的佈局（塊就是從上到下，內聯就從左到右）。而那些常規的適合頁面佈局，但對於支援大型或者雜的應用程式（特別是當他涉及到取向改變、縮放、拉伸和收縮等）就缺乏靈活性。
Grid佈局簡介
CSS Grid佈局 （又名"網格"），是一個基於二維網格佈局的系統，主要目的是改變我們基於網格設計的使用者介面方式。如我們所知，CSS 總是用於網頁的樣式設定，但它並沒有起到很好的作用。剛開始的時候我們使用表格( table )，然後使用浮動( float )、 定位( position )和內聯塊( inline-block )，但所有這些方法本質上來講都是hacks，存留了很多需要實現的重要功能問題(例如，垂直居中)。雖然Flexbox可以起到一定的補救作用，但是它只可以實現簡單的一維佈局，並不適用於複雜的二維佈局(實際上 Flexbox 和 Grid 可以一起結合使用起到最佳效果)。網格是 CSS 第一次專門建立的模組，用來解決我們之前在製作網站時使用hacks處理佈局問題。
網路佈局可以將應用程式分割成不同的空間，或者定義他們的大小、位置以及層級。就像表格一樣，網格佈局可以讓Web設計師根據元素按列或行對齊排列，但他和表格不同，網格佈局沒有內容結構，從而使各種佈局不可能與表格一樣。例如，一個網格佈局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。
此外，沒有內容結構的網格佈局有助於使用流體、調整順序等技術管理或更改佈局。通過結合CSS的媒體查詢屬性，可以控制網格佈局容器和他們的子元素，使用頁面的佈局根據不同的裝置和可用空間調整元素的顯示風格與定位，而不需要去改變文件結構的本質內容。
基本概念的簡述
我們就從兩者的之間的重要概念開始吧！因為對這些概念的理解更有助於我們後續的學習。當然這些概念也不是很複雜的概念，不會花費大家很多時間。那廢話就少說，直接開始吧！
維度上的對比
在CSS Grid佈局還未出現的時候，我們所看到的佈局都是一維佈局，不管是古老的 table 、 float 、 position 等，包括Flexbox佈局，他們都是一維的佈局。只有CSS Grid佈局才是二維佈局。眾所周知，在Web中我們有一個座標系統：
那麼什麼是一維佈局，什麼是二維佈局呢？
簡單的理解，一維佈局始終只能