弹性布局（display:flex下 align-content、justify-content、align-items三个属性的作用和效果

align-content属性

作用：设置同一列子元素在Y轴的对齐方式

属性值	描述
flex-start	排列在当前列的最上方
flex-end	排列在当前列的最下方
center	排列在当前列的中间位置
space-between	间距相等排列，上下不留白
space-around	间距相等排列，上下留白等于间距的一半

justify-content属性

作用：设置同一行子元素在X轴的对齐方式

属性值	描述
flex-start	排列在当前行的最左边
flex-end	排列在当前行的最右边
center	排列在当前行的中间位置
space-between	间距相等排列，两边不留白
space-around	间距相等排列，两边留白等于间距的一半

align-items属性

作用：设置同一行子元素在Y轴的对齐方式

属性值	描述
flex-start	排列在当前行的最上方
flex-end	排列在当前行的最下方
center	排列在当前行的中间位置
stretch	当子元素没有设置高度或为auto,将占满整个容器的高度
baseline	以子元素第一行文字的基线对齐