CSS3弹性布局

    style type="text/css">
    /*清除页边距*/
    body { margin: 0; padding: 0;}
    div { position: absolute; }
    .bg {/*设计遮罩层*/
        width: 100%; height: 100%;
        background: #000; opacity: 0.7;
    }
    .login {
        /*满屏显示*/
        width:100%; height:100%;
        /*定义弹性盒布局样式*/
        display: -moz-box;
        display: -webkit-box;
        display: box;
        /*垂直居中显示*/
        -moz-box-align: center;
        -webkit-box-align: center;
        box-align: center;
        /*水平居中显示*/
        -moz-box-pack: center;
        -webkit-box-pack: center;
        box-pack: center;
    }
    style>
    div class="web">img src="images/bg.png" />div>
    div class="bg">div>
    div class="login">img src="images/login.png"  />div>

2、新版本弹性盒

新版本弹性盒模型主要优化了UI布局，既可以简单地使一个元素居中（包括水平和垂直居中），又可以扩大或收缩元素填充容器的可利用空间，还可以改变布局顺序等。

2.1、认识Flexbox系统

Flexbox系统由弹性容器和弹性项目组成。

在弹性容器中，每一个子元素都是一个弹性项目，弹性项目可以是任意数量的，弹性容器外和弹性项目内的一切元素都不受影响。

弹性项目沿着弹性容器内的一个弹性行定位，通常每个弹性容器只有一个弹性行。在默认情况下，弹性行和文本方向一致：从左至右，从上到下。

常规布局是基于块和文本流方向，而Flex布局是基于flex-flow流。如下图所示是W3C规范对Flex布局的解释：

弹性项目是沿着主轴(main axis)，从主轴起点(main start)到主轴终点(main end)，或者沿着侧轴(cross axis)，从侧轴起点(cross start)到侧轴终点(cross end)排列。

• 主轴(main axis)：弹性容器的主轴，弹性项目主要沿着这条轴进行排列布局。注意，它不一定是水平的，这主要取决于内容对齐(justify-content)属性设置。
• 主轴起点(main start)和主轴终点(main end)：弹性项目放置在弹性容器内从主轴起点(main start)向主轴终点(main start)方向。
• 主轴尺寸(main size)：弹性项目在主轴方向的宽度或高度就是主轴的尺寸。弹性项目主要的大小属性要么是宽度属性，要么是高度属性，由哪一个对着主轴方向决定。
• 侧轴(cross axis)：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
• 侧轴起点(cross start)和侧轴终点(cross end)：弹性行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
• 侧轴尺寸(cross size)：弹性项目在侧轴方向的宽度或高度就是项目的侧轴长度，弹性项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。

一个弹性项目就是一个弹性容器的子元素，弹性容器中的文本也被视为一个弹性项目。弹性项目中的内容与普通文本流一样。例如，当一个弹性项目被设置为浮动，用户依然可以在这个弹性项目中放置一个浮动元素。

2.2、启动弹性盒

通过设置元素的display属性为flex或inline-flex可以定义一个弹性容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。具体语法如下：

    display: flex | inline-flex;

上面语法定义弹性容器，属性值决定容器是行内显示还是块显示，它的所有子元素将变成flex文档流，被称为弹性项目。

此时，CSS的columns属性在弹性容器上没有效果，同时float、clear和vertical-align属性在弹性项目上也没有效果。

【示例】设计一个弹性容器，其中包含4个弹性项目：

    style type="text/css">
    .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 500px; height: 300px;
        border: solid 1px red;
    }
    .flex-item {
        background-color: blue;
        width: 200px; height: 200px;
        margin: 10px;
    }
    style>
    div class="flex-container">
        div class="flex-item">弹性项目1div>
        div class="flex-item">弹性项目2div>
        div class="flex-item">弹性项目3div>
        div class="flex-item">弹性项目4div>
    div>

2.3、设置主轴方向

使用flex-direction属性可以定义主轴方向，它适用于弹性容器。具体语法如下：

    flex-direction：row | row-reverse | column | column-reverse

取值说明如下:

• row：主轴与行内轴方向作为默认的书写模式，即横向从左到右排列（左对齐）。
• column：主轴与块轴方向作为默认的书写模式，即纵向从上往下排列（顶对齐）。
• column-reverse：对齐方式与column相反。

【示例】在上节示例基础上，设计一个弹性容器，其中包含4个弹性项目，然后定义弹性项目从上往下排列:

    
    .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        width: 500px;height: 300px;border: solid 1px red;
    }
    .flex-item {
        background-color: blue;
        width: 200px; height: 200px;
        margin: 10px;
    }
    

2.4、设置行数

flex-wrap定义弹性容器是单行还是多行显示弹性项目，侧轴的方向决定新行堆放的方向。具体语法格式如下：

    flex-wrap：nowrap | wrap | wrap-reverse

取值说明如下：

• nowrap：flex容器为单行。该情况下，flex子项可能会溢出容器。
• wrap：flex容器为多行。该情况下，flex子项溢出的部分会被放置到新行，子项内部会发生断行。
• wrap-reverse：反转wrap排列。

【示例】在上面示例基础上，设计一个弹性容器，其中包含4个弹性项目，然后定义弹性项目多行排列：

    
    .flex-container {
  服务器托管网      display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 500px; height: 300px;border: solid 1px red;
    }
    .flex-item {
        background-color: blue;
        width: 200px; height: 200px;
        margin: 10px;
    }
    

【补充】flex-flow属性是flex-direction和flex-wrap属性的复合属性，适用于弹性容器。该属性可以同时定义弹性容器的主轴和侧轴，其默认值为row nowrap。具体语法如下：

    flex-flow：' flex-direction '> || ' flex-wrap '>

取值说明如下：

• ：定义弹性盒子元素的排列方向。
• ：控制flex容器是单行或者多行。

2.5、设置对齐方式

1、主轴对齐

justify-content定义弹性项目沿着主轴线的对齐方式，该属性适用于弹性容器。具体语法如下：

    justify-content：flex-start | flex-end | center | space-between | space-around

取值说明如下：

• flex-star：为默认值，弹性项目向一行的起始位置靠齐。
• flex-end：弹性项目向一行的结束位置靠齐。
• center：弹性项目向一行的中间位置靠齐。
• space-between：弹性项目会平均地分布在行里。第一个弹性项目在一行中最开始的位置，最后一个弹性项目在一行中最终点的位置。

上述取值比较效果如下图所示：

2、侧轴对齐

align-items定义弹性项目在侧轴上的对齐方式，该属性适用于弹性容器。具体语法如下：

    align-items：flex-start | flex-end | center | baseline | stretch

取值说明如下：

• flex-start：弹性项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
• flex-end：弹性项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
• center：弹性项目的外边距盒在该行的侧轴上居中放置。
• baseline：弹性项目根据它们的基线对齐。
• stretch：默认值，弹性项目拉伸填充整个弹性容器。此值会使弹性项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能地接近所在行的尺寸。

上述取值比较效果如下图所示：

3、弹性行对齐

align-content定义弹性行在弹性容器里的对齐方式，该属性适用于弹性容器。类似于弹性项目在主轴上使用justify-content属性，但本属性在只有一行的弹性容器上没有效果。具体语法如下：

    align-content：flex-start | flex-end | center | space-between | space-around | stretch

取值说明如下：

• flex-start：各行向弹性容器的起点位置堆叠。
• flex-end：各行向弹性容器的结束位置堆叠。
• center：各行向弹性容器的中间位置堆叠。
• space-between：各行在弹性容器中平均分布。
• space-around：各行在弹性容器中平均分布，在两边各有一半的空间。
• stretch：默认值，各行将会伸展以占用剩余的空间。

上述取值比较效果如下图所示：
【示例】以上面示例为基础，定义弹性行在弹性容器中居中显示：

    
    .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: center;
        align-content: center;
        width: 500px; height: 300px;border: solid 1px red;
    }
    .flex-item {
        background-color: blue;
        width: 200px; height: 200px;
        margin: 10px;
    }
    

2.6、设置弹性项目

弹性项目都有一个主轴长度(main size)和一个侧轴长度(cross size)。主轴长度是弹性项目在主轴上的尺寸，侧轴长度是弹性项目在侧轴上的尺寸。一个弹性项目的宽或高取决于弹性容器的轴，可能就是它的主轴长度或侧轴长度。

下面属性适用于弹性项目，可以调整弹性项目的行为。

1.显示位置

order属性可以控制弹性项目在弹性容器中的显示顺序，具体语法如下：

    order: 

用整数值定义排列顺序，数值小的排在前面，可以为负值。

2.扩展空间

flex-grow可以定义弹性项目的扩展能力，决定弹性容器剩余空间按比例应扩展多少空间。具体语法如下：

    flex-grow: 

其中，用数值定义扩展比率，不允许为负值，默认值为0。

如果所有弹性项目的flex-grow设置为1，那么每个弹性项目将设置为一个大小相等的剩余空间。如果给其中一个弹性项目设置flex-grow为2，那么这个弹性项目所占的剩余空间是其他弹性项目所占剩余空间的2倍。

3.收缩空间

flex-shrink可以定义弹性项目收缩的能力，与flex-grow功能相反。具体语法如下：

    flex-shrink: 

其中，用数值定义收缩比率，不允许为负值，默认值为1。

4.弹性比率

flex-basis可以设置弹性基准值，剩余的空间按比率进行弹性。具体语法如下：

    flex-basis： |  | auto | content

取值说明如下：

• ：用长度值定义宽度，不允许为负值。
• ：用百分比定义宽度，不允许为负值。
• auto：无特定宽度值，取决于其他属性值。
• content：基于内容自动计算宽度。

【补充】flex是flex-grow、flex-shrink和flex-basis 3个属性的复合属性，该属性适用于弹性项目。其中第二个参数(flex-shrink)和第三个参数(flex-basis)是可选参数，默认值为“0 1 auto”。具体语法如下：

    flex: none | [ 'flex-grow'> 'flex-shrink'>? || 'flex-basis'> ]

5.对齐方式

align-self用来在单独的弹性项目上覆写默认的对齐方式。具体语法如下：

    align-self：auto | flex-start | flex-end | center | baseline | stretch

其属性值与align-items的属性值相同。

【示例1】以上面示例为基础，定义弹性项目在当前位置向右错移一个位置，其中第一个项目位于第二个项目的位置，第二个项目位于第三个项目的位置，最后一个项目移到第一个项目的位置：

    
    .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 500px; height: 300px;border: solid 1px red;
    }
    .flex-item { background-color: blue; width: 200px; height: 200px; margin: 10px;}
    .flex-item:nth-child(0){
        -webkit-order: 4;
        order: 4;
    }
    .flex-item:nth-child(1){
        -webkit-order: 1;
        order: 1;
    }
    .flex-item:nth-child(2){
        -webkit-order: 2;
        order: 2;
    }
    .flex-item:nth-child(3){
        -webkit-order: 3;
        order: 3;
    }
    

【示例2】margin: auto;在弹性盒中具有强大的功能，一个auto的margin会合并剩余的空间。它可以把弹性项目挤到其他位置。下面利用margint: auto;定义包含的项目居中显示：

    
    .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 500px; height: 300px; border: solid 1px red;
    }
    .flex-item {
        background-color: blue; width: 200px; height: 200px;
        margin: auto;
    }
    
    
"flex-container">
        
"flex-item">弹性项目