Align-items: center overriding justify-content: space-around

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, и я не могу понять, как игнорировать его для гибкой строки.

Answer 1

Попробуйте переключить

align-items: center;

на

text-align: center;

, но поскольку

justify-content: space-between;

дает вам максимальное пространство, которое вы можете иметь между два элемента попробуйте настроить ширину сайта.