輕輕松松學CSS:Flex布局-有解無憂

　　 Flex布局就是“彈性布局”，它可以簡便、完整、回應式地實作各種頁面布局，引入彈性布局的目的，當頁面需要適應不同的螢屏大小確保元素擁有恰當的布局方式，對一個容器中的子元素進行排列、對齊和分配空間，

　　彈性容器（Flex container）通過設定display屬性的值為flex，包含多個彈性子元素(Flex item，很多資料把彈性子元素稱為“專案")

　　關于彈性布局的語法，阮一峰老師的博客（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html"）比較經典，很多其他博客都是轉載自此，
　　關于彈性布局的實體，阮一峰老師的另外一篇博客（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）也很經典，

　　讀者如果對flex布局語法不熟悉或者想結合實體來理解flex布局，可以仔細研讀以上兩個博客，

　　本文，主要是對典型的頁面布局再整理一下，以達到使讀者更深入細致地理解flex布局的目的

　　經典的圣杯布局或雙飛翼布局，頁面分為頭部（HEADER）、軀干（.CONTAINER)、尾部(FOOTER)，其中頭部、尾部定高，軀干高度自適應，軀干又分為導航（NAV）、主欄（MAIN)、側欄(ASIDE)，其中導航和側欄定寬，主欄的寬度自適應，
　　以前的傳統代碼用到了浮動，代碼稍顯繁瑣，其實可以使用flex布局，這樣代碼更簡潔，

　　典型的頁面布局效果圖如下：

　　DOM結構如下：

1 <body>
2     <header>HEADER</header>
3     <div class="container">
4         <nav>NAV</nav>
5         <main>MAIN</main>
6         <aside>ASIDE</aside>
7     </div>
8     <footer>FOOTER</footer>
9 </body>

　　以下的CSS代碼跟flex布局無關，它能影響背景色、固定高度值、固定寬度值等，讀者了解即可，這不是本文的重點，

 html{
            height: 100%;
            text-align:center;
        }
      body{
          margin:0;
          height:100%;
          color:red;
         }
         header{
             height: 120px;
             background-color: cornflowerblue;
         }
                  
       .container{
            background-color: #ccc;
            display: flex;
            height:calc(100% - 170px);
       }
       footer{
           height: 50px;
           background-color: #000;
           line-height:50px;
           text-align:center;
       }
       nav{
           background-color: lightgreen;
       }
       main{
           background-color:#ccc;
       }
       aside{
           background-color: orange;
       }

View Code

　　以下的CSS代碼跟flex布局有關

 1 .container{
 2             display: flex;
 3             flex-direction:row;
 4             flex-wrap:nowrap;
 5             justify-content:flex-start;
 6             align-items:stretch;
 7        }
 8        
 9        nav{
10            flex:0 0 200px;
11        }
12        main{
13            flex:1;
14        }
15        aside{
16            flex:0 0 150px;
17        }
18

　　其中.container是父容器，就是本文所指的“彈性容器(Flex container)”，nav、main、aside是子元素，就是本文所指的“彈性子元素（Flex item)"，或者叫”專案“

彈性容器的屬性

1、display:flex  通過這個屬性值把.container定義為彈性容器，這個屬性是彈性布局中最根本的屬性，沒有這個屬性（以及屬性值），其它屬性都沒有意義，
2、flex-direction:row 表示主軸沿著水平軸方向，這是默認值，
3、flex-wrap：nowrap 表示不換行，無論子元素多少都在一行顯示，
4、justify-content:flex-start 子元素在主軸上的對齊方式，本例中main元素自適應，填滿剩余空間，所以justify-content無論取什么值，對本例來說，效果都是一樣的，
5、align-items:stretch 子元素在交叉軸（和主軸垂直）上的對齊方式，本例中沒有指定nav、main、aside的高度，所以拉伸（stretch）到和父元素（彈性容器）一樣的高度，

子元素（專案）的屬性

nav/aside
flex:0 0 200px/flex:0 0 150px是一種簡寫形式
相當于：
flex-grow:0 主軸上有剩余空間子元素也不分配
flex-shrink:0 主軸上空間不足子元素也不縮小
flex-basis:200px/150px nav/aside在收縮前的基準值是200px/150px（對于flex-direction：row來說就是寬度）
main
flex:1是快捷鍵，相當于flex:1 1 0%
即：
flex-grow:1
flex-shrink:1
flex-basis:0%（即：0px）
flex：1表示以0px為基準，自動收縮，這個屬性值經常用，

　　Flex布局和多媒體查詢結合，使回應式布局更加簡便

　　　　/*中等螢屏*/
       @media (max-width:992px){
            /*主軸沿水平方向，超出空間后換行*/
            .container{flex-direction:row;flex-wrap:wrap;}
            /*nav、aside各占一半寬度*/
            nav,aside{flex:0 0 50%;height:200px;}
            /*main獨占一行*/
            main{order:1;flex:0 0 100%;}
        }
        /*小螢屏*/
        @media (max-width:768px){
            .container{
            display:flex;
            /*小螢屏時，因為nav、aside、main都獨占一行，*/
            /*所以主軸設定為沿垂直方向（交叉軸就沿水平方向）*/
            flex-direction:column;
            flex-wrap:nowrap;
            }
            nav,aside{
            width:100%;
            /*因為flex-direction:column，所以flex-basis:100px含義就是高度=100px*/
            /*固定高度100px*/
            flex:0 0 100px;
            }
            /*通過order屬性，設定顯示的先后順序*/
            nav{order:1;}
            /*flex：1自適應*/
            main{flex:1;order:3;}
            aside{order:2;}
        }

　　中等螢屏效果圖如下：

小螢屏效果圖如下：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/157697.html

標籤：Html/Css

上一篇：JavaScript 運算，流程控制和回圈

下一篇：探索小程式實作