flex和margin

发表于 分类于 本文字数： 988 阅读时长 ≈ 1 分钟
flex是常见的布局方式，这里介绍flex和margin搭配使用的一些技巧。

# 上下左右居中

在 flex 中，实现 flex 子元素上下左右居中，通常会这样做：

1
2
3
4
5
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

搭配 margin 使用，也可以实现：

1
2
3
4
5
6
.container {
  display: flex;
  .item {
    margin: auto;
  }
}

# flex 子元素左右间距自适应

在多个 flex 子元素中，如果想让某个元素自适应，占满剩余空间，可以使用 flex: 1 ：

1
2
3
4
5
6
.container {
  display: flex;
  .item2 {
    flex: 1;
  }
}

但是自适应的元素，左右间距都会自动填充，如果想让子元素占满剩余空间并仅左侧或者右侧边距占满，可以使用 margin ：

1
2
3
4
5
6
.container {
  display: flex;
  .item2 {
    margin-left: auto;
  }
}

# 均匀间距自动换行布局

  • 常见的页面中，有一种页面是很多个元素一行行排列，然后每个元素之间有一定的间距，一行多个，占满一行自动换行。

  • 这种情况下，我们可以会使用 flex 布局，代码如下：

1
2
3
4
5
6
7
8
.container {
  display: flex;
  flex-wrap: wrap;
  jucstify-content: space-between;
  .item {
    width: 50px;
  }
}

使用 space-between ，可以实现每行元素之间间距均匀分布，但是当最后一行不满一行的个数时，间距会有问题。

这时候，我们可以使用 margin 来处理，代码如下：

1
2
3
4
5
6
7
8
9
10
.container {
  display: flex;
  flex-wrap: wrap;
  .item {
    --n: 3;
    --gap: calc(100% - 50px * var(--n)) / var(--n) / 2;
    width: 50px;
    margin: 10px var(--gap);
  }
}

其中 --n 代表每一行有多少个元素， --gap 代表间距的大小，使用 calc 计算间距的大小，然后使用 margin 来设置间距。

这样，最后一行的元素就不会有间距问题了。