细说css3 flex布局之flex容器属性

flex是flexible box的缩写，意为弹性布局。用来为盒模型提供最大的灵活性。任何一个容器都可以通过设置display为flex或inline-flex将其指定为flex布局。设置flex布局之后，子元素的float、clear和vertical-align属性将失效。
采用flex布局的元素称为flex容器，而其所有子元素称为flex项目。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。轴的起始和结束为止分别称作main/cross start和main/cross end。项目默认沿主轴排列，项目占据的轴的空间叫main/cross size。详见下图：

flex布局分为flex容器和flex项目，因而就有flex容器属性和flex项目属性的分别，在此，只对flex的容器属性做介绍，关于flex属性的介绍在博文《细说css3 flex布局之flex项目属性》中。
以下6个属性是作用在flex容器上的：

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

1.1 flex-direction属性
该属性定义主轴的方向，即项目的排列方向。value的取值包括：row，row-reverse，column，column-reverse，其中row是默认值，水平方向（起点在左端），column是垂直方向（起点在顶端），带-reverse的值则表示反方向。用法及效果如下：
html代码

<div class="flex-box">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>

css代码

.flex-box{
        background:orange;
        display: flex;     /*定义为flex布局*/
        flex-direction:row-reverse; /*主轴为水平方向，起点在右端*/
    }
.flex-item{
    margin:10px;
    height:100px;
    width:100px;
    background: purple;
    color:#fff;
}

效果图：

1.2 flex-wrap属性
该属性定义项目是否换行并且如何换行。在默认情况下，项目都排在一条轴线上，如果一条轴线排不下，浏览器就根据这个属性的值对项目排列作出调整。value的取值包括：nowrap，wrap，wrap-reverse，其中，nowrap是默认值，不换行。用法及效果如下：

.item-class{
    flex-grow:1;
}

效果图：

说明：wrap表示换行，第一行在上方。使用row-reverse换行时，第一行在下方，亦即图中item6会出现在第一行。

1.3 flex-flow属性
该属性是flex-direction和flex-wrap的简写形式，默认值为row nowrap。使用方式如下：

.flex-item{
    flex-flow:colunm wrap;
}

1.4 justify-content属性
该属性定义了项目在主轴上（main axis）的对齐方式。value的取值包括：

• flex-start：默认值。轴的起始端（main/cross start）
• flex-end：轴的终点端
• center：居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。那么项目之间的间隔就是项目与边框之间的间隔的两倍。用法及效果如下：

.flex-item{
    justify-content:space-between;
}

效果图：


说明：这些属性对项目的作用是根据主轴的方向不同而改变的，如果将direction设置为column，那么这些效果则表现在纵向。

1.5 align-items属性
该属性定义项目在交叉轴上的对齐方式。value的取值包括：

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：居中
• baseline：以项目的第一行文字的基线对齐
• stretch：默认值，如果项目未设置高度或设为auto，那么项目将占满整个容器的高度。
  用法及效果如下：

.flex-item{
    align-items:baseline;
}

效果图：

1.6 align-content属性
该属性定义了多个轴线的对齐方式。value的取值包括：
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：交叉轴上居中
- space-between：交叉轴上两端对齐，轴线之间的间隔两端分布
- space-around：每个轴线两侧的间隔都相等。那么，轴线之间的间隔是轴线与边框之间间隔的两倍
- stretch：默认值，轴线占满整个交叉轴
咦！怎么都这么熟悉呢？对比原来发现这个属性的取值是跟前两个属性的取值有很大相似的。但它们其的效果还是有区别的。看图：

对比下align-items里面的center，是不是发现不同呢？每一行项目之间的距离变小了！是变小了吗？其实是轴线居中了！在这里，因为项目的换行，形成了多条轴线，而align-content就是作用在轴线上的，所以它会让每一条轴线居中。而align-items是将所有的项目看做一个整体，即使项目换行，也是将整个项目看做是一条轴线，最后将这个整体居中。

关于flex布局中的容器属性在这里就介绍完了，由于flex布局的知识点较多，因此没有在一篇博文中将其详细介绍完，剩下的flex布局中的项目属性大家可以参考博文《细说css3 flex布局值flex容器属性》。

未完待续·······