CSS3弹性盒子flex-box

CSS3 弹性盒子(Flex Box)

CSS3弹性盒子是CSS3规范中提出的一种新的布局方案。 弹性盒子布局模式提供了一种更加高效简单的方式来处理容器中的元素布局、对齐、空间分配等操作,已经被各大主流浏览器支持（现在微软已经放弃维护IE，这是一件多么开心的事情~~）

下面我们看下具体的属性和参数设置。  

弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素,弹性盒子只定义了弹性子元素如何在弹性容器内布局。 弹性子元素通常在弹性盒子内一行显示,默认情况下每个容器只有一行,从左到右显示

                         
<div class="flex-container-1">
    <span class="p-1"></span>
    <span class="p-1"></span>
    <span class="p-1"></span>
</div>
<style>
    .flex-container-1 {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        background-color: #ffca31;
    }
    .p-1 {
        width: 150px;
        height: 30px;
        margin-right: 10px;
        background-color: #1f9200;
    }
</style>
                        
                    

效果：  

容器属性

flex-direction： 该属性的作用是设置主轴方向，指定弹性子元素在父容器中基本的排列方式。

语法：flex-direction: row | row-reverse | column | column-reverse   

 row：（默认值）主轴为水平方向,子元素横向从左到右排列（左对齐）

 row-reverse：主轴为水平方向,从后往前排，最后一项排在最前面（右对齐）。

column：主轴为垂直方向，纵向排列

 column-reverse：主轴为垂直方向，反转纵向排列，从后往前排，最后一项排在最上面。

                        
    <div class="flex-container-2">
        <span class="p-2">11111</span>
        <span class="p-2">22222</span>
        <span class="p-2">33333</span>
    </div>
    <style>
        .flex-container-2 {
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-flex-direction: row-reverse;
            flex-direction: row-reverse; 
            background-color: #ffca31;
        }
        .p-2 {
            width: 150px;
            height: 30px; 
            background-color: #1f9200;
        }
    </style>
                        
                    

justify-content： 该属性设置内容项基于主轴方向上的对齐方式，把内容项沿着弹性容器的主轴线（main axis）对齐。

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

flex-start：（默认值）内容项集中于该行的起始位置。第一条内容项与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列，左对齐。

flex-end：内容项目紧挨着右对齐

center：内容项目居中紧挨着对齐

space-between：左右两端对齐，内容项目之间的间隔都相等。

space-around：每个内容项两侧的间隔相等，所以项目之间的间隔比项目和父元素左右两边的间隔可能不一样。

                        
<div class="flex-container-3">
    <span class="p-3">11111</span>
    <span class="p-3">22222</span>
    <span class="p-3">33333</span>
</div>
<style>
    .flex-container-3 {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex; 
        -webkit-justify-content: space-between;
        justify-content: space-between; 
        background-color: #ffca31;
    }
    .p-3 {
        width: 150px;
        height: 30px; 
        background-color: #1f9200;
    }
</style>                      
                    

align-items： 设置或检索弹性盒子元素在交叉轴上的对齐方式

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

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴居中对齐。

baseline: 与项目的第一行文字的基线对齐。

stretch（默认值）：如果内容项未设置高度或设为auto，将占满整个容器的高度。

flex-wrap： 指定弹性盒子的内容项的换行方式。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; 

 nowrap：默认值，内容不换行，该情况下内容可能会溢出容器。

 wrap：换行，内容溢出的部分会被放置到新行，第一行在上方

wrap-reverse：换行，第一行在下方。

align-content： 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用，类似于align-items, 设置各个行或者列的对齐。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。

stretch：默认值，轴线占满整个交叉轴。

注意：这几种属性设置在弹性盒布局中是不起作用的：float，clear，vertical-align，多列布局columns，首行/首字符选择伪类（::first-line和::first-letter）

所有的属性设置都是在父容器上的。