Flex & Grid & 聖盃佈局

時間 2019-11-09

標籤 flex grid 佈局欄目 Flex 简体版

原文原文鏈接

　　背景：2009年，W3C 提出了一種新的方案----Flex 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。-- 阮一峯css

下面是Flex在各大瀏覽器的兼容問題：html

在過去幾年裏，Flexbox已經成了前端最流行的佈局框架，在之後的平常開發裏，必須熟練掌握 Flexbox 的用法。然而，前端村兒裏面還有個叫Grid的小孩兒橫空出世，下面是Grid在各大瀏覽器的兼容問題：Opera，Uc，IE10 和 IE11 支持帶有 -ms 前綴的原始規格,Grid的兼容性確實不太好，不過我相信你之後Grid一定會和Flex互補，主宰css佈局。前端

　　選擇：css3

Flexbox用來作一維佈局，Grid用來作二維佈局web

意思是若是你只在一個方向上佈局（好比在header裏面放三個button），你須要使用Flexboxchrome

他將會比Grid更加靈活，能夠用更少的代碼去實現而且更加容易維護。promise

可是，若是你打算在兩個維度上建立一個完整的佈局，同時使用行和列，那麼你應該使用Grid瀏覽器

在這種狀況下，Grid會更加靈活，而且會使你的標籤更簡單，代碼更容易維護。安全

你能夠結合二者一塊兒使用，在上面的例子中最完美的作法是使用Grid來佈局頁面，使用Flexbox去對齊header裏面的內容。框架

　　語法：Flex語法：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

　　　　　　 Grid語法：http://www.javashuo.com/article/p-dendegnj-bw.html

　　例子：用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>

查閱資料：

[譯]使用 CSS Grid：以兼容不支持柵格化佈局的瀏覽器

將來佈局之星Grid

CSS3的calc()使用

CSS終極之戰：Grid vs Flexbox

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。