flex布局入门（二）

本系列文章将会对CSS的flex布局做一个简单的介绍，希望读者朋友们能够对它的功能有一个整体的认知，在工作中可以自由的运用。

这是本系列文章的第二篇，将分别介绍flex布局中主轴侧轴的概念、元素在主轴方向上的排列规则、元素在侧轴方向上的排列规则。

什么主轴和侧轴？

默认情况下，主轴的方向为从左到右，侧轴的方向为从上到下。可以通过flex-direction属性改变主轴、侧轴的方向。主轴、侧轴方向的改变影响元素的布局。

flex-direction: row (默认)

主轴方向：从左到右
侧轴方向：从上到下

默认.png

flex-direction: row-reverse

主轴方向：从右到左
侧轴方向：从上到下

演示.png

flex-direction: column

主轴方向：从上到下
侧轴方向：从左到右

演示.png

flex-direction: column-reverse

主轴方向：从下到上
侧轴方向：从左到右

演示.png

元素在主轴上的排列规则

只有子元素不能占满主轴时，才需要考虑它们在主轴上的排列规则。可以通过justify-content属性改变排列规则。

justify-content: flex-start (默认)

元素顺着主轴方向依次排列

演示.png

justify-content: flex-end

元素逆着主轴方向依次排列

演示.png

justify-content: center

元素在主轴方向上居中排列

演示.png

justify-content: space-between

多余空间均匀分布在子元素间

演示.png

justify-content: space-around

多余空间均匀环绕在子元素间

演示.png

元素在侧轴上的排列规则

只有子元素不能占满侧轴时，才需要考虑它们在侧轴上的排列规则。可以通过align-items属性改变排列规则。

align-items: flex-start

元素顺着侧轴方向排列

演示.png

align-items: flex-end

元素逆着侧轴方向排列

演示.png

align-items: center

元素在侧轴方向上居中排列

演示.png

align-items: stretch （默认）

未设置高度的子元素会占满整个侧轴。

演示.png

部分源码

    <style>
    .row-reverse{
        flex-direction: row-reverse;
    }
    .column{
        flex-direction: column;
    }
    .column-reverse{
        flex-direction: column-reverse;
    }
    .wrapper{
        display: flex;
        height: 100px;
        background: #eee;
    }
    .red{
       background: red;
    }
    .yellow{
        background: yellow;
    }
    .orange{
        background: orange;
    }
    .w100{
        width: 100px;
    }
    .h100{
        height: 100px;
    }
    .w200{
        width: 200px;
    }
    .h200{
        height: 200px;
    }
    .w600{
        width: 600px;
    }
    .h600{
        height: 600px;
    }
    </style>
    <div class="wrapper w600 h600">
        <div class="box w100 h100 red"></div>
        <div class="box w100 h100 orange"></div>
        <div class="box w100 h100 red"></div>
        <div class="box w100 h100 orange"></div>
        <div class="box w100 h100 red"></div>
        <div class="box w100 h100 orange"></div>
        <div class="box w100 h100 red"></div>
    </div>