css弹性布局

01_父元素上的属性_justify-content
/* 启用弹性布局 */
   display: flex;
 justify-content 用于控制子元素在父元素主轴(默认是水平从左向右)的排列以及分布
取值：
flex-start      靠近主轴的起点
center          在主轴的中间对齐
flex-end        靠近主轴的终点

space-between   等距分隔
space-around    等距环绕
space-evenly    平均分
小结：
justify-content     控制子元素在主轴方向   的排列以及分布方式
取值：
排列
flex-start、center、flex-end

分布
space-between、space-around、space-evenly

02_父元素上的属性_align-items
 /* 启用弹性布局 */
    display: flex;
align-items     用于控制子元素在次轴(默认是垂直的，从上向下)的排列方式
取值：
flex-start  靠近次轴的起点对齐
center      沿次轴中间对齐
flex-end    靠近次轴的终点对齐

stretch     当没有为子元素设置高度，高度与父元素相同
baseline    文字基线对齐

小结：
align-items     用于设置在次轴上的排列方式
取值：
flex-start
center
flex-end
algin-items仅有于在一行的情况下(不换行)

03_父元素上的属性_flex-wrap