flex布局应用场景

                                       flex布局应用场景

（一）骰子布局参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

（二）网格布局

（1）基本网格布局

      最简单的网格布局，就是平均分布。在容器里面平均分配空间，骰子布局很像，但是需要设置项目的自动缩放。

实现效果如下自适应的布局，随着窗口放大缩小布局方式不变 。

（2）百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

实现原理与上面的类似，只是具体百分比的值需要这样设置：flex: 0 0 33.3333%;

（三）圣杯布局

  圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

两边固定中间自适应

    
    
    



    
头部
    

        
中间部分
        
left导航部分
        
右侧部分
    
    
底部

(四)流式布局（常用）

代码实现：

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10

（五）固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

    
    
    


头部
重要区域
底部

（六）悬挂式布局

实现代码如下：

    
    
    



    
    
文字内容