早期前端所有 HTML 頁面的布局還都是通過 table、float 以及其他的 CSS 屬性來完成的。面對復(fù)雜頁面的布局，卻沒有很好的辦法。然而 Flexbox 的出現(xiàn)，便輕松的解決了復(fù)雜的 Web 布局。 現(xiàn)在又出現(xiàn)了一個構(gòu)建 HTML 最佳布局體系的新競爭者。它就是強(qiáng)大的 CSS Grid 布局。
二者從應(yīng)用場景來說并不沖突。雖然 Flexbox 也可以用于大的頁面布局，但是沒有 Grid 強(qiáng)大和靈活。二者結(jié)合使用更加輕松。
簡述 flexbox 是一種一維的布局，是因為一個 flexbox 一次只能處理一個維度上的元素布局，一行或者一列。
Flexbox布局（Flexible Box)模塊旨在提供一個容器里的項目布局（基于一維），即使他們的大小是未知或者是動態(tài)的。
簡述 網(wǎng)格布局（Grid）是最強(qiáng)大的 CSS 布局方案。 Grid 將網(wǎng)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。網(wǎng)格是一組相交的水平線和垂直線，它定義了網(wǎng)格的列和行。我們可以將網(wǎng)格元素放置在與這些行和列相關(guān)的位置上。
采用網(wǎng)格布局的區(qū)域，稱為容器（container）。容器內(nèi)部采用網(wǎng)格定位的子元素，稱為項目（item）。
