CSS3中display属性的Flex布局-圣杯布局实例

一，为什么写这篇文章

在很早之前就接触display：flex布局，尤其是不考虑低版本浏览器兼容之后，就开始肆无忌惮的使用了。之前做pc端的时候，要求兼容到ie8，也不会注意到它。后来做移动端，第一次看到display：flex，还是从一个实习生的代码里，然后查了查资料，居然是这么方便。

简单的使用及原理请查看阮一峰大神的讲解。

二.基本使用

父元素

{
    display:flex;
}

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

可以有6个属性可以设置，具体不再细说。

子元素

{
    flex:none | auto; /* default auto */
}

/* 1表示该元素撑满剩余空间 */
{
    flex:1
}

我主要想说的是子元素的flex属性，刚接触时确实不好理解。理解了这个就可以实现左固定右自适应的这种布局，通常出现在列表显示的时候。网上还通常见到flex：1 |none|auto 的这种写法，就是下面这几个属性在作祟。

每个子元素也称为 “项目”，属性值有:

1、order  //定义各个子元素的排列顺序，数值越小，排列越靠前，默认为0，可为负数
     

     .item{
         order:-1;/* 任意数字 */
     }

2、flex-grow  //定义子元素的放大比例，默认为0（不放大），前提是父容器有空余空间

.item{
         flex-grow: <number>; /* default 0 */
     }

3、flex-shrink  //如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

.item{
         flex-shrink: <number>; /* default 1 */
     }

4、flex-basis  //在子元素分配空余空间前，设定指定的子元素的空间大小，默认auto（原值）

.item{
         flex-basis: <length> | auto; /* default auto */
     }
    /* 可以设置60% 或者 200px */

5、flex  //是flex-grow、flex-shrink、flex-basis的组合，默认值flex:0 1 auto;

.item{
         flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
     }
     /* 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto) */
     /* 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值 */

6、align-self  //允许单个子元素与其他子元素不一样的对齐方式，可以覆盖父元素设定的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同stretch（填充满）。

.item{
         align-self: auto | flex-start | flex-end | center | baseline | stretch;
     }

我们通常用到的就是这个flex属性，在布局的时候会很有用。

对于这个属性，最好是手动敲一下，尝试一下各种值出现的效果。

三.圣杯布局

layout布局一直是css很重要的知识点，在面试中也会经常遇到，这里就用flex做一个圣杯布局。

css

*{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    body{
        display: flex;
        flex-direction:column;
    }
    .header,.footer{
        flex: 0 0 80px;
        background-color: #7dbcea;
    }
    .container{
        flex: auto;
        background-color: #145d9c;
        display: flex;
    }
    .container .left,.container .right{
        flex: 0 0 200px;
        background-color: #3a90ce;
    }
    .container .main{
        flex: auto;
        background-color: #145d9c;
    }

html

<div class="header"></div>
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>