flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。

它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 

flex主轴
          flex-direction: row;
flex侧轴
          flex-direction: column;

子集排列方式：
            /* 子集从左至右 */
            justify-content: flex-start;
            /* 子集从右至左 */
            justify-content: flex-end;
            /* 子集连在一起居中 */
            justify-content: center;
            /* 单个子集左右两边平均分布 */
            justify-content: space-around;
            /* 子集左右两个贴边，剩余的平均分布 */
            justify-content: space-between;
            /* 子集平均分布 */
            justify-content: space-evenly;

效果图：