HTML+CSS之弹性布局

本文主要介绍网页布局中弹性布局的使用。使用该布局，核心在于把握其中各个属性的含义及用法。各属性如下所示：

1.flex-direction

flex-direction设置主轴的方向，默认为x轴方向

2.flex-wrap

flex-wrap设置元素排列是否换行：

设置为nowrap时，元素不换行，通过justify-content排列主轴的元素，通过align-items排列次轴的元素。（默认值）

设置为wrap时，元素换行，通过justify-content排列主轴的元素，通过align-content排列次轴的元素。若未设置align-content的值，则可以使用align-items排列次轴的元素。注意：利用align-items排列元素时，后续可使用align-self单独定义某个元素的排列方式。

3.justify-content

属性取值如下：

center:居中对齐

flex-start:取决于主轴方向的设置，起始位置对齐

flex-end:取决于主轴方向的设置，结束位置对齐

space-between:元素左右贴边，距离相等

space-around:左右元素距左右侧的距离为x,中间元素相距2x，总体距离和为空白区域

space-evenly:元素距左右侧及元素之间的距离均分空白区域

4.align-content

同justify-content的属性类似，无space-evenly的取值。另外，属性可取值为stretch，为默认值。元素会由上或左进行排列（取决于主轴方向），填充整个区域

5.align-items

同justify-content的属性类似,无space系列属性。另外，属性可取值为stretch，还可取值为baseline:

代码如下：

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    
    
 flex-direction属性设置主轴方向。

flex-wrap:

若为wrap，justify-content排主轴，align-content排次轴。

 若为nowrap,justify-content排主轴，align-items排次轴
    


    ​

下面介绍一个案例，利用弹性布局实现下图的效果。

代码如下：