关于css3弹性布局

我们平常在对网页进行布局的手会用到一些辅助性的工具，比如bootstrap。在设计方面肯能会用到浮动（float）或者display:inline-block. 但是还有一种平常用得比较少但是性能强大的css3模型————flexbox. 今天就来探讨一下弹性布局。就拿li标签的布局来说。 先写几个li标签

<ul class="flexlili">
        <li class="flex-item one">一一一一</li>
        <li class="flex-item two">二二二二</li>
        <li class="flex-item three">三三三三</li>
        <li class="flex-item four">四四四四</li>
        <li class="flex-item five">五五五五</li>
 </ul>

对单独的li标签设置样式

.flex-item{
            flex-flow: row;
            flex-direction: row;
            flex-wrap: wrap;
            list-style-type: none;
            width: 200px;
            height: 150px;
            background-color: #ee93d7;
            margin: 5px;
        }

对li标签外面的ul标签设置样式

.flexlili{margin:0;padding:0;
            display: flex;
            display:-webkit-flex;
            flex-direction: row;
        }

首先对其创建一个flex容器，display:flex。为了更好的兼容，添加-webkit-前缀。flex-direction: row，水平布局。

效果图如下：

flex-direction：row，主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左，（默认是靠左（-webkit-justify-content: flex-start; justify-content: flex-start;），将flex盒子整行移到右边：-webkit-justify-content: flex-end; justify-content: flex-end;,将flex盒子移到正中间：-webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;）（justify-content其它属性值，space-between：第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。 space-around： 类似于 space-between，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。）

flex-direction其它的一些属性值：row-reverse，主轴为水平方向。排列顺序与页面的文档顺序相反，主体向右“浮动”

效果如下：

column，主轴为垂直方向。排列顺序为从上到下，（默认靠左排列（-webkit-align-items: flex-start; align-items: flex-start;），将flex盒子整列移到右边：-webkit-justify-content: flex-end; justify-content: flex-end;，将flex盒子移到正中间：-webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;）（align-items其它属性值，baseline：条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。 stretch：如果条目的交叉轴尺寸的计算值是”auto”，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。 ）

效果如下:

column-reverse，主轴为垂直方向。排列顺序为从下到上。

效果如下:

flex-wrap的一些属性值：nowrap（默认值容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象，

(窗口缩小后如下：（上同）)

wrap，当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致，

（窗口缩小后如下：）

wrap-reverse，与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。

可以使用”flex-flow”属性把”flex-direction”和”flex-wrap”结合起来，flex-flow: row wrap。(效果看上去和对固定了宽高的的盒子做float浮动一样)

 .flexlili{margin:0;padding:0;   
            display: flex;
            display:-webkit-flex;
            flex-flow: row wrap;
        }

给定伸缩值，让flex盒模型按一定比例伸缩

    .one{ -webkit-flex:1; flex:1;}
    .two{ -webkit-flex:2; flex:2;}
    .three{ -webkit-flex:3; flex:3;}
    .four{ -webkit-flex:4; flex:4;}
    .five{ -webkit-flex:5; flex:5;}

五个li元素宽度分别占比1/15、2/15、3/15、4/15、5/15，效果如下：

我们可以通过选择器选择和oeder属性指定flex盒模型的排列顺序，order可以为正数可以为负数，为正数时使选择元素往后排，为负数时使选择元素往前排。

.flex-item:nth-child(3){order: -1;}     

选择flex-item类组下面第三个子类，使它排在第一个位置，效果如下：

关注公众号回复“资料”即可获得为您精心准备的前端视频学习资料