CSS-Tricks之布局分两派

写在前面

在 CSS 布局时常常遇到的一个样式如下所示：

即三个元素，后两个或多个为一组，分为两派，则这种布局实现方式仅仅使用flex布局无法实现，故可在flex布局的基础上使用如下几种方式实现：

<div class="wrapper">
    <button>删除</button>
    <button>取消</button>
    <button>完成</button>
</div>

.wrapper{
    display: flex;
    justify-content: space-between;
    width: 300px;
    margin: 50px;
    border: 1px solid #666;
  }

巧用span标签

可用span标签将后两个元素包裹起来，即可实现。

但是这种方式仅仅适用于元素为inline或inline-block的元素，若元素为block元素，则此方法行不通，因为在span标签内的div不是flex布局，会自动占用一行，成两行。

button默认为inline内联元素

<div class="wrapper">
    <button>删除</button>
    <span>
      <button>取消</button>
      <button>完成</button>
    </span>
</div>

巧用div+flex

若元素为block元素，基于上述方式的改进，可以将span标签里设置为flex布局，但尽量不要在内联元素(或内联块级元素)里包含块级元素，因此可改用div包裹后两个元素，并结合flex布局

<div class="wrapper">
    <div>删除</div>
    <div class="wrapper1">
      <div>取消</div>
      <div>完成</div>
    </div>
  </div>

.wrapper1{
    display: flex;
}

巧用margin

对于block块级元素，还有另外一种更简单的方法，即使用margin

<div class="wrapper">
    <div>删除</div>
    <div class="cancel">取消</div>
    <div>完成</div>
</div>

.cancel{
    margin-left: auto;
}

当然依葫芦画瓢，为第一个元素加上margin-right: auto;也是一样的效果