Skip to main content

justify-content 属性

Docs

justify-content - CSS：层叠样式表 | MDN (mozilla.org)

  • justify-content 决定了 flex items 在 main axis 上的对齐方式
  • flex-start（默认值）：与 main start 对齐
  • flex-end：与 main end 对齐
  • center：居中对齐
  • space-between
    • flex items 之间的距离相等
    • 与 main start、main end 两端对齐
  • space-around
    • flex items 之间的距离相等
    • flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
  • space-evenly
    • flex items 之间的距离相等
    • flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

justify-content 属性用于设置弹性容器中子元素在主轴上的对齐方式。它可以设置弹性容器中子元素在主轴方向上的对齐方式，如左对齐、居中对齐或右对齐等。

  • flex-start：默认值。子元素靠左对齐。
  • flex-end：子元素靠右对齐。
  • center：子元素居中对齐。
  • space-between：子元素平均分布在容器中，两端不留空隙。
  • space-around：子元素平均分布在容器中，两端留有空隙。
  • space-evenly：子元素平均分布在容器中，包括两端都留有空隙。
Details