CSS的简单布局与Flex

Question

Hi there I am trying to achive the following look for a partial UI section of my application,

As you can see I too buttons centered in the middle of an element with a nice space between them, I have tried to achive this with the following code

<div class="modal__footer">  
    <a class="button button--cancel>Skip</a>  
    <a class="button button--confirm>Take the tour!</a>  
</div>

.modal__footer {
    margin-top:30px;
    display:flex;
    .button {
        flex:1;
        &:first-child {
            margin-right:30px;
        }
    }
}

However this has resulted in the following,

As you can I have the buttons in the element but they take up the full width of the parent elements width instead of being centered.

Answer 1

Just remove the flex:1 from the buttons and use justify-content:center on the parent.

 .modal__footer { margin-top: 30px; display: flex; justify-content: center; } .modal__footer .button { background: #c0ffee; padding: 1em; } .modal__footer .button:first-child { margin-right: 30px; } 

 <div class="modal__footer"> <a class="button button--cancel">Skip</a> <a class="button button--confirm">Take the tour!</a> </div> 

Answer 2

Try this:

.modal__footer {
    margin-top:30px;
    display:flex;
    text-align:center;
    .button {
        &:first-child {
            margin-right:30px;
        }
    }
}