[分享]css两端对齐 间距相同

CSS的两端对齐和间距相同都是常用的样式处理方式。下面我们通过pre标签来进行代码的演示。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  flex-basis: calc(50% - 10px);
} 

上述代码中，我们采用了Flex布局，通过justify-content: space-between;和align-items: center;将子元素对齐到父元素的两端和中央位置，实现两端对齐和间距相同的效果。同时，为了避免子元素撑开容器造成间距变大，我们使用了flex-basis: calc(50% - 10px);计算每个子元素的宽度。

除此之外，我们还可以使用text-align和margin来进行两端对齐和间距相同的实现：

.container {
  text-align: justify;
}
.item {
  display: inline-block;
  width: 50%;
  margin-right: 10px;
}
.item:last-of-type {
  margin-right: 0;
} 

在上述代码中，我们给父元素container设置了text-align: justify;以实现两端对齐的效果。然后，我们将子元素item设置为inline-block，宽度为50%，并为每个子元素设置右边距为10px，最后将最后一个子元素的右边距设置为0，以实现间距相同的效果。