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

user_6130262 0
Viewed 537

I want to have a centered flex column layout with some items inside in a row with space between them.

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;
}

The problem is the flex-row space-between doesn't work while the parent container has align-items: center and I can't figure out to how ignore it for the flex-row.

flexbox css
1 Answers

Try switching 

align-items: center;

with

text-align: center;

but since 

justify-content: space-between;

gives you the max space you can have between two items try adjusting the width of the site.

user_136195320
Related