对齐项目：居中覆盖 justify-content：空格

Question

我想要一个居中的弹性列布局，其中一些项目在一行中，它们之间有空格。

html:

    <div class="flex">
        <h1>Welcome</h1>
        <p>
            Before you start there's a short introduction
        </p>
        <p>
            <b>Do you want to see it?</b>
        </p>
        <div class="flex-row">
            <span><b>Skip</b></span>
            <button>Start</button>
        </div>
    </div>

css:

.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

问题是当父容器有 align-items: center 时，flex-row space-between 不起作用，我不知道如何忽略 flex-row。

Answer 1

尝试切换

align-items: center;

与

text-align: center;

但是自从

justify-content: space-between;

为您提供两个项目之间的最大空间尝试调整网站的宽度。