架构爱好者
学习交流中心

弹性盒(Flexible Box)模型

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属性的常见属性值,并解释各属性值的含义

未经允许不得转载:技术杂烩 » 弹性盒(Flexible Box)模型