html - css 简单布局与 flex

Question

您好，我正在尝试为我的应用程序的部分 UI 部分实现以下外观，

正如你所看到的，我也将按钮居中放置在一个元素的中间，它们之间有一个很好的空间，我试图用下面的代码实现这一点

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

但是这导致了以下结果，

如您所见，我在元素中放置了按钮，但它们占据了父元素宽度的整个宽度，而不是居中。

Answer 1

只需从按钮中删除 flex:1 并在父级上使用 justify-content:center。

.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>