关于弹性布局的一些简单应用

弹性布局是现在一种简单方便的布局方式，它是肯定节省大家许多花费在布局上的时间，现在在网上已经有不少大神都发报了关于弹性布局的看法及使用，许多方面都值得借鉴，本人现在写这文章除了想跟大家分享以外，还想借此让自己加深印象，毕竟快赶上鱼的记忆了，不容易啊，直接上图!

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .box div{
            width: 100px;
            height: 100px;
            background: orange;
            border: 1px solid;
        }

    </style>

先生成一个大容器，然后里面放8个小div块。

接下来我们将大容器里面的方块横排，这需要用到display属性。

display: flex;

我们可以看下如下的样式，方块实现了横排，但是大家可能发现里面的方块大小发生了改变，因为8个div的宽度已经超过大容器的宽度了，而且display:flex属性默认是不换行的，这里我们就需要用到换行属性来改变它。

 /*换行*/
            flex-wrap: wrap;
            /*不换行*/
            /*flex-wrap: nowrap;*/
            /*靠底部换行*/
            /*flex-wrap: wrap-reverse;*/

如代码所示，默认不换行nowrap,换行wrap,以及靠底部换行wrap-reverse


对于容器的布局需要引入阮大神提到的一个知识点，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

接下来我们就先延水平主轴方向来实现布局，要用到justify-content属性来实现对齐方式

/*两端对齐，项目之间的间隔都相等。*/
            justify-content:space-between;
            /*居中*/
            /*justify-content: center;*/
            /*每个项目两侧的间隔相等*/
            /*justify-content: space-around;*/
            /*左对齐*/
            /*justify-content: flex-start;*/
            /*右对齐*/
            /*justify-content:flex-end ;*/

如下图就是水平方向两端对齐，项目之间的间隔都相等，其他图片就不一一展示了

接下来我们看下如何在交叉轴上如何对齐。

 		/*交叉轴的中点对齐。*/
            align-items: center;
            /*交叉轴的终点对齐。*/
            /*align-items:flex-end;*/
            /*交叉轴起点对齐*/
            /*align-items: flex-start;*/
            /*项目的第一行文字的基线对齐*/
            /*align-items: baseline;*/
            /*如果项目未设置高度或设为auto，将占满整个容器的高度*/
            /*align-items: stretch;*/

如下图就是交叉轴中点对齐

然后在看下flex-direction属性，主要是改变主轴方向的属性。

 /*水平向左方向*/
            /*flex-direction: row;*/
            /*水平向右方向*/
            /*flex-direction: row-reverse;*/
            /*垂直向下方向*/
            /*flex-direction: column;*/
            /*垂直向上方向*/
            flex-direction: column-reverse;

下面就是改变主轴方向变成垂直向上方向的样子。

再看align-content属性是定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

/*与交叉轴起点对齐*/
            /*align-content: flex-start;*/
            /*与交叉轴终点对齐*/
            /*align-content: flex-end;*/
            /*与交叉轴中点对齐*/
            /*align-content: center;*/
            /*与交叉轴两端对齐*/
            align-content: space-between;
            /*每根轴线两侧的间隔都相等*/
            /*align-content: space-around;*/
            /*默认值轴线占满整个交叉轴*/
            /*align-content: stretch;*/

下图就是与交叉轴两端对齐的的属性样式。

以上就是写了几个常用到的弹性布局属性，如果将这几个属性灵活的组合运用，那么在页面布局上就可以事半功倍。