justify-content:
- flex-start:默认值,伸缩项目向一行的起始位置靠齐;
- flex-end:伸缩项目向一行的结束位置靠齐;
- center:项伸缩项目向一行的中间位置靠齐;
- space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置;
- space-around:伸缩项目会平均地分布在行里,两端保留一半的空间;
- initial:设置该属性为它的默认值;
- inherit:从父元素继承该属性。
align-items:
- stretch:默认值,项目被拉伸以适应容器;
- center:项目位于容器的中心;
- flex-start:项目位于容器的开头;
- flex-end:项目位于容器的结尾;
- baseline:项目位于容器的基线上;
- initial:设置该属性为它的默认值;
- inherit:从父元素继承该属性。
水平垂直居中效果:
.container { // 创建flex容器 display: flex; // 竖直垂直居中 align-items: center; // 水平居中 justify-content: center; .span {} }
// TODO justify-content属性的常见属性值,并解释各属性值的含义