align

align

1.align-content属性

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

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

2.align-items属性

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

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

3.justify-content属性

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

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