DevShelf

Appearance

justify-content ​

描述 ​

justify-content 属性决定浏览器如何沿容器的主轴分布 Flex 元素周围的空间。这是在应用尺寸和自动缩进之后完成的，除非至少一个 flex-grow 元素的值大于零。在这种情况下，没有剩余空间可供操作。

效果展示 ​

语法 ​

css
justify-content: flex-start | flex-end | center | space-between | space-around |
  space-evenly;

值 ​

  • flex-start 元素位于容器的开头。这是默认值。对于布局网格元素（grid elements），允许使用缩写的起始值；对于 flex 元素，必须使用完整的 flex-start 值。
  • flex-end 元素位于容器的末端。对于布局网格元素（grid elements），允许使用缩写的结束值；对于 flex 元素，必须使用完整的 flex-end 值。
  • center 元素位于容器的中心。
  • space-between 元素均匀分布在整个行中，第一个元素位于容器的开头，最后一个元素位于容器的末尾。
  • space-around 元素均匀分布在整个行中，第一个元素和最后一个元素之后的空白空间等于容器中相邻元素之间的一半。
  • space-evenly 在每个元素之间放置均匀的间隙，包括容器的开头和远端。