column-gap实现两端对齐效果实例页面

展示

代码

• HTML：

  <h4>分栏布局实现两端对齐</h4>
  <div class="container">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
  </div>

• CSS：

  .container {
      width: 300px;
      border: solid deepskyblue;
      column-count: 3;
      column-gap: 5%;
  }
  .list {
      height: 100px;
      background-color: deeppink;
  }