写在前面

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

布局分两派 - 图1

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

  1. <div class="wrapper">
  2.     <button>删除</button>
  3.     <button>取消</button>
  4.     <button>完成</button>
  5. </div>
  1. .wrapper{
  2.     display: flex;
  3.     justify-content: space-between;
  4.     width: 300px;
  5.     margin: 50px;
  6.     border: 1px solid #666;
  7.   }

布局分两派 - 图2

巧用span标签

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

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

button默认为inline内联元素

  1. <div class="wrapper">
  2.     <button>删除</button>
  3.     <span>
  4.       <button>取消</button>
  5.       <button>完成</button>
  6.     </span>
  7. </div>

布局分两派 - 图3

巧用div+flex

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

  1. <div class="wrapper">
  2.     <div>删除</div>
  3.     <div class="wrapper1">
  4.       <div>取消</div>
  5.       <div>完成</div>
  6.     </div>
  7.   </div>
  1. .wrapper1{
  2.     display: flex;
  3. }

布局分两派 - 图4

巧用margin

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

  1. <div class="wrapper">
  2.     <div>删除</div>
  3.     <div class="cancel">取消</div>
  4.     <div>完成</div>
  5. </div>
  1. .cancel{
  2.     margin-left: auto;
  3. }

布局分两派 - 图5

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