Flex布局中space-around与space-evenly的区别 | 青训营

95 阅读1分钟

#青训营笔记创作活动 Flex布局中space-around与space-evenly的区别

在flex布局中,space-around与space-evenly有点相似,那他们的区别在哪呢?

对齐方式 justify-content

  • start

  • end

  • center

  • space-between

    c89a5dcb1d8b06f67aeddc9fe843fa5.png

  • space-around

    5000b53d7534c1105d1569e6ff8eaa2.png

  • space-evenly (蓝色箭头长度是红色的一半)

    8ace848f4ff949cf3196a16c3dd7b22.png

区别在于:space-evenly中,flex 元素之间和 flex 元素和容器的空间总是相等的,space-around中只有 flex 元素之间的空间是相等的,第一个 flex 元素和最后一个 flex 元素和容器的空间是 flex 元素间空间的一半