最近看到乙個大牛前端說的這兩個布局在使用的時候如何抉擇的原則，在這裡記錄一下：
原則一：是一維布局，還是二位布局？
一維布局：就是要不就都是橫著布局，或都是豎著布局。
二維布局：就是橫豎布局都存在。
一般來說一維布局用flex,二維布局用grid
原則二：是從內容出發，還是從布局出發
從內容出發：你先有一組內容（數量一般不固定），然後希望他們均勻的分布在內容中，由內容的大小決定佔據的空間
從布局出發：先規劃網格（數量一般比較固定），然後再把元素往裡填充
從內容出發用flex，從布局出發用grid
希望以上原則能夠為自己未來在前端布局的時候能夠帶來更好的體驗。
css布局 flex 響應式 grid
布局 原始布局方式，利用 的特性展示布局，沒有頁面邏輯且大量冗餘 現在幾乎不用 固定寬 常用960px，移動端縮放表現差，不友好 流式 使用float實現動態浮動，各解析度下樣式無法保證 flex彈性盒子 簡潔且強大，主流使用 css柵格布局 grid 將網頁分成一系列行和列，將對應內容放入對應區域...
CSS中的flex和grid布局
flex布局 flex布局是彈性布局，用來為盒模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。但是，設定為flex布局後，子元素的float，clear，vertical align屬性都會失效。我們對於採用flex布局的元素，稱為容器，對於子元素，稱為專案。布局原理 通過給父盒子新增f...
grid 布局的使用
grid 布局的使用 css 網格布局，是一種二維布局系統。瀏覽器支援情況 老舊瀏覽器不支援，概念 網格容器。元素應用dispalay grid,它是所有網格項的父元素。網格項。網格容器的子元素。網格線。組成網格線的分界線，他們可以是列網格線，也可以是行網格線 網格軌道。兩個相鄰的網格線之間為網格軌...