CSS之弹性盒子jusitify-content对齐方式

justify-content用法

用于设置盒子元素在主轴(横轴)方向上的对齐方式

属性值

  • flex-start: 默认值,位于容器开头
  • flex-end: 项目位于容器结尾
  • center: 项目位于容器的中心
  • space-between: 项目位于各行之间留有空白的容器内
  • space-around: 项目位于各行之前、之间、之后留有空白的容器内
  • initial: 设置该属性为它的默认值
  • inherit: 从父元素继承该属性

align-content用法

在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)

属性值

  • stretch: 默认值,项目被拉伸以适应容器
  • flex-start: 项目位于容器开头
  • flex-end: 项目位于容器结尾
  • center: 项目位于容器的中心
  • space-between: 项目位于各行之间留有空白的容器内
  • space-around: 项目位于各行之前、之间、之后留有空白的容器内
  • initial: 设置该属性为它的默认值
  • inherit: 从父元素继承该属性