背景：2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地使用這項功能。-- 阮一峰
下面是Flex在各大瀏覽器的兼容問題：
在過去幾年里，Flexbox已經成了前端最流行的布局框架，在以后的日常開發里，必須熟練掌握 Flexbox 的用法。然而，前端村兒里面還有個叫Grid的小孩兒橫空出世，下面是Grid在各大瀏覽器的兼容問題：Opera，Uc，IE10 和 IE11 支持帶有 -ms 前綴的原始規格,Grid的兼容性確實不太好，不過我相信你以后Grid必定會和Flex互補，主宰css布局。
選擇：
Flexbox用來做一維布局，Grid用來做二維布局
意思是如果你只在一個方向上布局（比如在header里面放三個button），你需要使用Flexbox
他將會比Grid更加靈活，可以用更少的代碼去實現並且更加容易維護。
但是，如果你打算在兩個維度上創建一個完整的布局，同時使用行和列，那么你應該使用Grid
在這種情況下，Grid會更加靈活，並且會使你的標簽更簡單，代碼更容易維護。
你可以結合兩者一起使用，在上面的例子中最完美的做法是使用Grid來布局頁面，使用Flexbox去對齊header里面的內容。
語法：Flex語法：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Grid語法：https://www.cnblogs.com/xiaohuochai/p/7083153.html#anchor1
例子：用Flex和Grid兩種布局做一個聖杯布局，比較一下。
Flex 布局：
.content{ /* background:red; */ /* 橫向中間內容區自適應，即使未指定寬度，但會分配寬度 塊級元素未主動設置寬度或未被子元素撐起寬度，瀏覽器默認為塊級元素分配寬度為可使用的全部寬度，比如全屏寬。 */ /* flex:1 == 1 1 auto：剩余空間放大比例(flex-grow) 空間不足縮小比例(flex-shrink) 分配多余空間之前項目占據的主軸空間(flex-basis) flex:1指的是：中部區域自由伸縮 auto指的是項目本來大小，因未給main設置高度,main高度由子元素最高者決定，若子元素高度為0，則main高度為0 塊級元素未主動設置高度或未被子元素撐起高度，瀏覽器默認為塊級元素分配高度為0。 */ flex:1; } .left,.right{ height:100%; background:blue; flex:0 0 100px;/* 左右兩列固定寬 */ }
<header>The Holy Grail Layout with CSS flex</header> <div class="main"> <div class="left">左邊</div> <div class="content"> <p>You smart, you loyal, you a genius. Let’s see what Chef Dee got that they don’t want us to eat. I’m up to something. The key to more success is to have a lot of pillows. I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. I’m up to something. Lion! We the best. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. Hammock talk come soon.</p> <p>It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. They don’t want us to eat. Let’s see what Chef Dee got that they don’t want us to eat. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae earum, unde et! Iste ab deleniti facere et nemo ut ipsa. Placeat ex qui, nulla quaerat! Esse totam aliquam, sed ullam?></p> </div> <div class="right">右邊</div> </div> <footer>footer</footer>
Grid 布局：
//先定義每一個模塊的名字
.hg-header { grid-area: header; } .hg-footer { grid-area: footer; } .hg-main { grid-area: main; } .hg-left { grid-area: navigation; } .hg-right { grid-area: ads; } //定義行列的大小和各個模塊擺放的位置 .hg { display: grid; grid-template-columns: 150px 1fr 150px; grid-template-rows: 100px 1fr 30px; grid-template-areas: "header header header" "navigation main ads" "footer footer footer"; min-height: 100vh; } //當屏幕寬度小於600px時，改變各個模塊的位置 @media screen and (max-width: 600px) { .hg { grid-template-areas: "header" "navigation" "main" "ads" "footer"; grid-template-columns: 100%; grid-template-rows: 100px 50px 1fr 50px 30px; } }
<body class="hg"> <header class="hg-header">The Holy Grail Layout with CSS Grid</header> <main class="hg-main"> <p>You smart, you loyal, you a genius. Let’s see what Chef Dee got that they don’t want us to eat. I’m up to something. The key to more success is to have a lot of pillows. I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. I’m up to something. Lion! We the best. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. Hammock talk come soon.</p> <p>It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. They don’t want us to eat. Let’s see what Chef Dee got that they don’t want us to eat. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae earum, unde et! Iste ab deleniti facere et nemo ut ipsa. Placeat ex qui, nulla quaerat! Esse totam aliquam, sed ullam?></p> </main> <aside class="hg-left">Menu</aside> <aside class="hg-right">Ads</aside> <footer class="hg-footer">Footer</footer> </body>
注： 做着demo的時候突然想起了 cacl() 是不是也可以做聖杯布局，而且很簡單。
何為cacl（）：calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。例如：width: calc(100% - 200px);
兼容性：感覺各大瀏覽器對cacl（）的兼容性還好，但需要在其前面加上各瀏覽器廠商的識別符。只有在Opera上不友好。
識別符：//-ms代表【ie】內核識別碼
//-moz代表火狐【firefox】內核識別碼
//-webkit代表谷歌【chrome】/蘋果【safari】內核識別碼
//-o代表歐朋【opera】內核識別碼
<div class="parent"> <div class="left w200">左邊</div> <div class="center">中間</div> <div class="right w200">右邊</div> </div>
<style> .w200{ width: 100px; height: 500px; background-color: green; } .parent{ display: flex; flex-direction: row; width: 100%; } .center{ width:-webkit-calc(100% - 200px); height: 500px; } </style>
查閱資料：