Flexbox中心和间距 - CSS

Flexbox是CSS3引入的一个强大的布局模型，它让网页设计者更容易创建动态和响应式的布局。在Flexbox中，可以通过设置justify-content和align-items属性来实现水平和垂直方向的居中，以及通过gap属性设置元素之间的间距。

居中

要水平居中Flexbox容器中的元素，可以使用justify-content属性，并将其设置为center：

.container {
  display: flex;
  justify-content: center;
}

要垂直居中Flexbox容器中的元素，可以使用align-items属性，并将其设置为center：

.container {
  display: flex;
  align-items: center;
}

要同时水平和垂直居中Flexbox容器中的元素，可以将上面的两个属性同时使用：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

间距

要设置元素之间的间距，可以使用gap属性。该属性可用于设置元素之间的间距，而不会影响容器的大小。

.container {
  display: flex;
  gap: 20px;
}

结论

Flexbox是一个强大的布局模型，通过使用justify-content和align-items属性实现水平和垂直方向的居中，以及使用gap属性设置元素之间的间距，让我们更容易的创建动态和响应式的布局。