<!--容器-->

        <div class="box">

            <!--子项-->

            <div class="item">1</div>

            <div class="item">2</div>

            <div class="item">3</div>

        </div>

        .box {

            width: 200px;

            height: 200px;

            background-color: #58a;

        }

        .item {

            width: 50px;

            height: 50px;

            margin: 2px;

            background-color: #fb3;

        }

• flex-start：默认值，表示与行的起始位置对齐
• flex-end：表示与行的结束位置对齐
• center：表示与行中间对其
• space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start
• space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center

　　justify-content 的前三种取值的效果图如下：

• stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度
• flex-start：表示与侧轴开始位置对齐
• flex-end：表示与侧轴的结束位置对齐
• center：表示与侧轴中间对其
• baseline：表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start

　　align-items 取值为 stretch 的效果图如下：

　　　　　　　　　　　　　　　　　　　　　stretch.png

　　align-items 取值为 flex-start flex-end center 的效果图如下：

　　　　　　　　　　　　　　　　　　　　　　　normal.png

　　align-items 取值为 baseline 的效果图如下：

　　　　　　　　　　　　　　　　　　　　　baseline.png

6、align-content：该属性只作用于多行的情况下，用于多行的对齐方式，取值：stretch | flex-start | flex-end | center | space-between | space-around；