css - 为什么我的边距会自动调整以使宽度相等？

Question

我有 4 列，每列宽度为 25%，左边距为 25px，最后一个子项的右边距为 25px。现在，结果实际上是我想要的，每个宽度相同，边距相等，但我对它的工作原理感到困惑。直觉上，最后一个 child 的宽度不应该比前三个 child 的宽度小，因为它不仅有左边距，还有右边距吗？

const Column = styled.div`
    margin-left: 25px;
    width: 25%;
    display: flex;
    flex-direction: column;
    &:last-child {
        margin-right: 25px;
    }
`;

Answer 1

您可以使用 margin:auto 来获得相同的宽度和相同的边距。