前端常见布局

1. 要实现两列布局，中间间隔20px，可以使用以下CSS代码片段：

<div class="container">
  <div class="left">左列内容</div>
  <div class="right">右列内容</div>
</div>

.container {
  display: flex;
}

.left,
.right {
  flex: 1;
}

.left {
  margin-right: 10px; /* 左列右侧间隔一半 */
}

.right {
  margin-left: 10px; /* 右列左侧间隔一半 */
}

2. 要实现三列布局，中间间隔20px，可以使用以下CSS代码片段：